Angular Material Table工单状态为Closed时隐藏Update Progress按钮问题

问题原因 #

你的代码存在两个核心错误：

1. TypeScript 中使用了比较运算符 == 做赋值操作，导致 isShowDiv 没有被正确赋值
2. 显示逻辑写反了：状态为Closed时你给对应属性赋值为true，而模板中*ngIf="true"会显示按钮，和你要隐藏的需求相反

最优解决方案（无需额外维护变量） #

你完全不需要单独维护isShowDiv对象，直接在模板中通过行数据的status字段判断即可，代码更简洁不易出错：

<!-- 只需要修改Update Progress按钮外层的判断即可，其他代码保持不变 -->
<div *ngIf="element.status !== 'Closed'">
  <button mat-menu-item routerLink="updatestatus/{{ element.id }}">
    <mat-icon>update</mat-icon>
    <span>Update Progress</span>
  </button>
</div>

同时可以删除TS中所有和isShowDiv相关的代码，无需额外处理。

保留原有写法的修复方案 #

修改TS中的循环逻辑，把比较运算符改成赋值运算符，同时修正判断逻辑：

for (var i = 0; i < obj.length; i++) {
  console.log('Status', obj[i].status);
  // Closed状态时隐藏按钮，所以赋值为false
  this.isShowDiv[obj[i].id] = obj[i].status !== 'Closed';
}

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