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

【问题标题】：What is wrong with Angular's logical OR in option attribute? When [(ngModel)] is used in select the [selected] attribute doesn't affect the selectionAngular 在 option 属性中的逻辑 OR 有什么问题？当 [(ngModel)] 用于选择时，[selected] 属性不会影响选择
【发布时间】：2023-04-11 00:58:02
【问题描述】：

我有一个这样的选择：

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

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

这里的完整选择是

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

UPD 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" 选择器相关（这是值的绑定，在控制器端使用）并被初始化为

impulseSelection = 3;

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

【问题讨论】：

你写的看起来不错。这可能是您其余代码的结果。将“impulse === 10 || isTraining”替换为“true”，看看它是否有效。很可能您同时将多个选项设置为 true
如所写，添加“|| isTraining”没有意义，因为当 isTraining 为真时，它将是唯一可用的选项。
@Rick 我已经尝试过使用这个<option [selected]="true" value="10">10</option> 并且默认情况下仍然没有选择选项...
@Rick 我希望它不仅是唯一的选项，而且默认情况下也被选中，无需从最初为空的下拉列表中选择，以获得更好的用户体验。
正确。没有理由不应该这样做。检查你的控制台是否有 javascript 错误

标签： angular typescript angular-template angular-template-variable

【解决方案1】：

没有理由不应该这样做。检查您的日志中是否存在 javascript 错误。如果没有以空 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>

【讨论】：

为问题添加了更多有趣的数据；仍然看不到控制台错误
当然。不起作用，而正在工作
我仍然不确定“不工作”是什么意思，如果你只有一个选项，它应该默认显示。尝试控制台日志记录脉冲 && isTraining。也许它们不是你认为的那样？也有可能它们在某些时候都未定义？
您可能会在问题所附的屏幕截图中看到无法选择唯一选项。它只是默认情况下不被选中，并且可以使选择控件不为任何值选中。
我在上面编辑了我的代码。试试看，看看这些值是不是你认为的那样。