Question

我想要实现的是，根据要隐藏并显示另一个div的所选值，我在angular6中有一个Select字段。

这是代码。

 <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第一次切换时确实会产生影响，但此后不会产生影响。未检测到更改。

我什至尝试设置样式的可见性属性以及[hidden]指令，但得到相同的结果。

我什至尝试给出一种on change方法，但结果没有变化。

版本信息：

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

这两个控件的格式均为“ ngForm”。

Answer 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>

Answer 2

managed的字符串值为'true'或'false' update ngIf

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

或者您可以使用ngValue，这样托管的布尔值将为true，false

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

* ngif第一次单击后无法使用。角度6

2 个答案: