Angular 选项属性中的逻辑或有什么问题？当 [(ngModel)] 在 select 中使用时，[selected] 属性不会影响 selection

Question

我在 select 中有这样一个选项：

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

当我有 impulse 的任何可能值并且 isTraining 是 true 时，我的期望是当前选项默认为 selected，因为 selected 关键字在下拉列表中，但事实并非如此。逻辑运算符是否曾经评估过需要布尔值的属性？

完整的 select 这里是

<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>

selection 的问题与将 [(ngModel)]="impulseSelection" 用于 selector 相关（这是对值的绑定，在控制器端使用）并初始化为

impulseSelection = 3;

所以关联的绑定总是覆盖 selector 的值到 3，而它不在那里。看起来唯一的解决方案是在将 isTraining 分配给 true 时将此 impulseSelection 值强制为 10。

Answer 1

没有理由认为这不起作用。检查您的日志是否有 javascript 错误。 If none 以 select 语句开始并清空 select 语句，然后将其恢复到您拥有的状态，一次一个，直到找到问题。

我还想将这些值添加到 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>

Angular 选项属性中的逻辑或有什么问题？当 [(ngModel)] 在 select 中使用时，[selected] 属性不会影响 selection

What is wrong with Angular's logical OR in option attribute? When [(ngModel)] is used in select the [selected] attribute doesn't affect the selection

typescript

angular-template

angular

angular-template-variable