Angular 5动态表单：非Admin角色时显示对应控件的实现问题

嘿，我明白你遇到的问题了——直接访问addUserFrm.controls.role.Description是不对的，因为addUserFrm.controls.role是一个FormControl实例，选中的角色对象存在它的value属性里，而不是直接挂载Description属性，这就是你当前ngIf判断失效的核心原因。

你完全不需要在组件TS里额外写方法或维护变量，直接修正模板里的判断逻辑就能实现需求，具体可以这么做：

修正模板中的ngIf判断 #

使用FormControl的value属性获取选中的role对象，再访问它的Description，同时加上安全导航操作符（?.），避免初始未选中角色时出现空值报错：

<div class="form-group">
  <span>Role*</span>
  <select class="form-control" formControlName="role" id="Role">
    <option *ngFor="let role of roles" [ngValue]="role"> {{role.Description}} </option>
  </select>
</div>
<!-- 修正后的Centre字段判断 -->
<div *ngIf="addUserFrm.controls.role.value?.Description !== 'Admin'" class="form-group">
  <span>Centre*</span>
  <select class="form-control" formControlName="centre" id="Centre">
    <option *ngFor="let centre of centres" [ngValue]="centre"> {{centre.Description}} </option>
  </select>
</div>
<!-- 修正后的Infrastructure字段判断 -->
<div class="form-group" *ngIf="addUserFrm.controls.role.value?.Description !== 'Admin'">
  <span>Infrastructure*</span>
  <select class="form-control" formControlName="infrastructure" id="Infrastructure">
    <option *ngFor="let infrastructure of infrastructures" [ngValue]="infrastructure"> {{infrastructure.Description}} </option>
  </select>
</div>

更优雅的简化写法（可选） #

如果觉得模板里的addUserFrm.controls.role.value太长，也可以在组件TS里定义一个getter属性（这不算额外的业务方法，只是简化模板代码）：

// 组件TS文件中
get selectedRole() {
  return this.addUserFrm.get('role').value;
}

之后模板里的判断就可以简化成：

<div *ngIf="selectedRole?.Description !== 'Admin'" class="form-group">
  <!-- 对应字段内容 -->
</div>

这样既保持了模板的简洁性，也不用额外维护状态变量，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Lewis