typescript - Angular Material 表格中的 If 条件

我正在使用 Angular Material 表格，我想根据 if 条件隐藏表格中的一列。如果条件为真，则该列在页面上显示，否则隐藏。

这是我的 HTML 代码。

 <ng-container matColumnDef="delete">   
  <th class="th" mat-header-cell  *matHeaderCellDef> Delete </th>
    <td mat-cell *matCellDef="let element" ><span><i class="fa fa-trash" aria-hidden="true" (click)="check(element._id)"  style="cursor: pointer;"  data-toggle="modal" data-target="#dModal"></i></span> 
     </td>  
  </ng-container>

这是我的 TypeScript 代码

 displayedColumns: string[] = ['assessment','status','action','issue','created','delete'];

我试过但失败了，有人能帮我吗？

答案＃1

如果你想根据 if 和 else 条件隐藏列，你应该动态构建 displayedColumns 数组。

例如。

你想隐藏删除列，displayedColumns 数组的值如下

this.displayedColumns = ['assessment','status','action','issue','created'];

答案＃2

@Murugan 的回答很好，如果你只有几个字段。但如果你有很多列，使用其他方法可能会更好。在我的情况下，我有很多列，比如：

columns = [{columnDef: '1',...}, ... columnDef: '50',...]
displayedColumns = this.columns.map(c => c.columnDef);

并且取决于情况，我需要删除第30、31、43列。然后我有其他 displayedColumnsToRemove=['30','31','43',]

在我的条件语句中我移除了它

if (conditional) {
  this.displayedColumns = _.xor(this.displayedColumns,this.displayedColumnsToRemove);
      }

我正在使用 lodash 库 (_.xor)，但如果你不能使用，我在寻找其他方法来移除这些元素。