ngIf 不触发更新 [(ngModel)] 变量

Question

我有一个 select 选项。 select 有一个 [(ngModel)] 指令将 selected 值保存到 "rightFieldTypeId." 中，然后我根据 "rightFieldTypeId." 的值显示我想要显示的元素字符串rightFieldTypeId {{ rightFieldTypeId }} 的插值显示正确的值，因为我 select 不同的选项（即 1、2 或 3）。但是，我的基于 *ngIf 指令的元素似乎从未 evaluate/change.

<div class="d-flex w-50">
    <select class="form-control w-25 mr-4" [(ngModel)]="rightFieldTypeId">
        <option *ngFor="let option of fieldTypeOptions" [value]="option.id">
            {{ option.name }}
        </option>
    </select>
    {{ rightFieldTypeId }}
    <span *ngIf="rightFieldTypeId === 2">This is Text</span>
    <edit-spec-wizard-operations-builder *ngIf="rightFieldTypeId === 3"></edit-spec-wizard-operations-builder>
</div>

关于如何根据 [(ngModel)]

中的当前值使用 *ngIf 指令显示不同元素的任何见解

Answer 1

HTML option 值是 string 并且与严格比较 (===) 进行比较不会强制类型，因此 2 === '2' 将是 false。

有几种方法可以使用它：

使用双相等比较 - ==;
使用 + 从字符串 *ngIf="+rightFieldTypeId === 2" 生成整数，但是如果 rightFieldTypeId 不能被强制转换为整数，您可能会遇到运行时错误；
简单的比较字符串，因为rightFieldTypeId永远是字符串*ngIf="rightFieldTypeId === '2'"

ngIf 不触发更新 [(ngModel)] 变量

ngIf not triggering on update of [(ngModel)] variable

angular

angular-forms