typescript - If-sats i Angular-materialtabell

Jag använder Angular Material-tabell och jag vill dölja en kolumn i tabellen baserat på ett if-villkor. Om villkoret är sant visas kolumnen på sidan annars döljs den.

detta är min HTML-kod.

 <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>

detta är min ts-kod

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

Jag försökte men misslyckades, kan någon hjälpa mig?

Svar #1

Om du vill dölja kolumnen baserat på if- och else-villkoret bör du bygga displayedColumns-arrayen dynamiskt.

Till exempel.

Du vill dölja borttagningskolumnen, värdet i displayedColumns-arrayen som

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

Svar #2

@Murugan-svaret är bra om du har några fält. Men om du har många kolumner kan det vara bättre att använda ett annat sätt. I mitt fall har jag många kolumner, som:

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

och beror på situationen, jag behöver ta bort kolumn 30, 31, 43. Då har jag andra displayedColumnsToRemove=['30','31','43',]

i min villkorliga tar jag bort det

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

Jag använder loadsh-biblioteket (_.xor), men om du inte kan, letar jag efter annat sätt att ta bort dessa element.