ng如果在更新 [(ngModel)] 变量时未触发

Question

我有一个选项。选择有一个[(ngModel)]指令，将所选值保存到"rightFieldTypeId"中。然后，我有想要根据"rightFieldTypeId"的值显示的元素。当我选择不同的选项(即 1、2 或 3(时，rightFieldTypeId{{ rightFieldTypeId }}的字符串内插显示正确的值。但是，我基于*ngIf指令的元素似乎从未评估/更改。

<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

HTMLoption值是一个string，与严格比较(===(进行比较不会强制类型，所以2 === '2'将被false。

所以有几种方法可以使用它：

1. 使用双等比较 -==;
2. 使用+从字符串*ngIf="+rightFieldTypeId === 2"生成整数，但如果不能强制rightFieldTypeId整数，您可能会遇到运行时错误;
3. 简单地与字符串进行比较，因为rightFieldTypeId将始终是字符串*ngIf="rightFieldTypeId === '2'"