*ngif 第一次点击后不工作。角 6

Posted 2023-02-18

【中文标题】*ngif 第一次点击后不工作。角 6

【英文标题】：*ngif Not working after first click. Angular 6

【发布时间】：2019-03-23 04:58:56

【问题描述】：

我想要实现的是，我在angular6中有一个Select字段，基于我想要隐藏和显示另一个div的选定值。

这里是代码。

 <div class="form-group">
          <label for="servicePriviledges">Managed</label>
          <select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
            <option value="false">False</option>
            <option value="true">True</option>
          </select>
           <br>
        </div>

<div class="form-group" *ngIf="managed">
          <label for="managerType" >Manager Type</label>
          <select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
            <option value="false">False</option>
            <option value="true">True</option>
          </select>
        </div>

*ngIf 在我第一次切换它时确实会产生影响，但之后不会。未检测到更改。

我什至尝试设置 style 的 visibility 属性以及 [hidden] 指令，但得到了相同的结果。

我什至尝试过提供 on change 方法，但结果没有变化。

版本信息：

"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",

这两个控件都在“ngForm”表单下。

【参考方案1】：

另一种方法是为每个选项附加[ngValue] 指令。

<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
    <option [ngValue]="false">False</option>
    <option [ngValue]="true">True</option>
</select>

【参考方案2】：

managed 的字符串值为'true' 或'false' 像这样更新ngIf

<div class="form-group" *ngIf="managed === 'true'">
 ...
 </div>

或者你可以使用 ngValue 所以 managed 会有一个布尔值 true ， false

 <select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
   <option [ngValue]="false">False</option>
   <option [ngValue]="true">True</option>
  </select>

【讨论】：

我们对第二种方法也有同样的想法。无论如何，+1。