angular - Angular 在 option 属性中的逻辑 OR 有什么问题？当 [(ngModel)] 用于选择时，[selected] 属性不会影响选择

Question

我有一个这样的选择选项：

<option [selected]=" impulse === 10 || isTraining " value="10">10</option>

当我有任何可能的值时，impulse我的期望是由于下拉列表中的选定关键字，默认情况下会选择当前选项，但事实并非如此。逻辑运算符是否曾经评估过需要布尔值的属性？isTrainingtrue

这里的完整选择是

<select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>

UPD

这是下面的代码：

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
                           for="field_flashFormatImpulses">Flash Impulse</label>
                    <select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>
                </div>
                <div>
                    <select class="form-control">
                        <option [selected]="true" value="10">10</option>
                    </select>
                </div>

当我们将代码更改为

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
                           for="field_flashFormatImpulses">Flash Impulse</label>
                    <select class="form-control" name="flashFormatImpulse" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)" [(ngModel)]="impulseSelection" [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="true" value="10">10</option>
                    </select>
                </div>
                <div>
                    <select class="form-control">
                        <option [selected]="true" value="10">10</option>
                    </select>
                </div>

即[selected]两者都相同（但外观不同）。

即<option [selected]="true" value="10">10</option>有效，<option [selected]="impulse === 10 || isTraining" value="10">10</option>但无效

更新 2

这就是它在下面查找代码的方式：

<div class="form-group">
                    <label class="form-control-label" jhiTranslate="businesslogic.flashs.flashcard.impulse"
                           for="field_flashFormatImpulses">Flash Impulse</label>
                    <select class="form-control" name="flashFormatImpulse" [(ngModel)]="impulseSelection" id="field_flashFormatImpulses"
                            (change)="handleFlashImpulseSelection($event)"  [disabled]="isStarted">
                        <option *ngIf="!isTraining" [selected]="impulse === 1" value="1">1</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 2" value="2">2</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">3</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 4" value="4">4</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 5" value="5">5</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 6" value="6">6</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 7" value="7">7</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 8" value="8">8</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" >
                        <option *ngIf="!isTraining" [selected]="impulse === 3" value="3">9</option>
                        <option *ngIf="!isTraining" [selected]="impulse === 9" value="9">9</option>
                        <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                    </select>
                </div>

                <div>impulse {{impulse}}, isTraining {{isTraining}}, result: {{impulse === 10 || isTraining}}</div>

                <select class="form-control">
                    <option [selected]="impulse === 10 || isTraining" value="10">10</option>
                </select>

选择的问题与使用[(ngModel)]="impulseSelection"for 选择器（即值的绑定，在控制器端使用）相关，并初始化为

impulseSelection = 3;

因此，关联的绑定总是将选择器的值覆盖为 3，而它并不存在。看起来唯一的解决方案是在分配为 trueimpulseSelection时将此值强制为 10 。isTraining

Answer 1

没有理由不应该这样做。检查您的日志中是否存在 javascript 错误。如果没有以空选择语句开头并将其构建回您所拥有的内容，则一次一个，直到找到问题为止。

我还喜欢将值添加到 html 中，以确保它们是您认为的那样。像这样：

<div>impulse {{impulse}}, isTraining {{isTraining}}, result: {{impulse === 10 || isTraining}}</div>

<select class="form-control">
  <option [selected]="impulse === 10 || isTraining" value="10">10</option>
</select>