Angular中如何单独控制HTML元素？用户状态按钮批量控制问题

我明白你现在遇到的困扰啦——全局的userEnableFlag和userDisableFlag会让所有用户的按钮状态同步变化，没办法根据每个用户自身的禁用/启用状态单独显示对应按钮。其实根本不需要维护这两个全局变量，直接用每个用户实例的enabled属性来判断就可以解决问题！

步骤1：修改模板代码 #

把模板里判断按钮显示的条件，从全局变量换成当前循环项item的enabled属性：

<clr-dg-action-overflow>
  <!-- 用户禁用时显示Enable按钮 -->
  <button class="action-item" *ngIf="!item.enabled" (click)="enableSingle(item)">Enable</button>
  <!-- 用户启用时显示Disable按钮 -->
  <button class="action-item" *ngIf="item.enabled" (click)="disableSingle(item)">Disable</button>
</clr-dg-action-overflow>

步骤2：简化TypeScript代码 #

你不需要再设置全局的userEnableFlag和userDisableFlag了，直接把接口返回的用户列表赋值给数据源即可：

this.setupUserStreaming().subscribe((results: Array<UsersResponse>) => {
  // 假设你的用户列表数据源是this.users，直接赋值
  this.users = results;
  // 删掉原来设置全局flag的代码，不需要啦！
});

步骤3：更新按钮点击后的状态 #

在enableSingle和disableSingle方法里，记得更新对应用户的enabled属性，这样模板会自动更新按钮显示：

enableSingle(user: UsersResponse) {
  // 调用启用用户的API逻辑
  // ...API请求代码...
  
  // 请求成功后更新用户状态
  user.enabled = true;
}

disableSingle(user: UsersResponse) {
  // 调用禁用用户的API逻辑
  // ...API请求代码...
  
  // 请求成功后更新用户状态
  user.enabled = false;
}

这样修改后，每个用户的按钮都会根据自己的enabled状态独立显示，再也不会出现所有按钮同步变化的问题啦～

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