时间戳

首页 > 解决方案 > ngIf 不会在更新 [(ngModel)] 变量时触发

angular - ngIf 不会在更新 [(ngModel)] 变量时触发

问题描述

我有一个带有选项的选择。选择具有[(ngModel)]将所选值保存到“rightFieldTypeId”的指令。然后，我想根据“rightFieldTypeId”的值显示元素。{{ rightFieldTypeId }}当我选择不同的选项（即 1、2 或 3）时，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>

*ngIf任何关于如何使用基于当前值的指令来显示不同元素的见解[(ngModel)]

标签： angularangular-forms

解决方案

HTMLoption值是 astring并且与严格比较 ( ===) 进行比较不会强制类型，所以2 === '2'将是false.

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

  1. 使用双重相等比较 - ==;
  2. 用于+从字符串生成整数*ngIf="+rightFieldTypeId === 2"，但如果rightFieldTypeId不能强制转换为整数，则可能会出现运行时错误；
  3. 只需与字符串进行比较，因为rightFieldTypeId将始终是字符串*ngIf="rightFieldTypeId === '2'"

推荐阅读