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>

這是我的 ts 代碼

 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);
      }

我正在使用 loadsh 函式庫 (_.xor)，但如果你不能，正在尋找其他方法來移除這些元素。