如何在 *ngFor mat table 中使用 ngIf 来隐藏 columns/truncate 单元格内容

Question

所以我正在处理 mat-table，我的问题是如何隐藏特定列（基于 *ngIf）或截断超过 50 个字符的单元格内容（我有自定义管道).

如果列名是 xyz hide/truncate。我想不出办法，而且我绝对是 angular 的新手，任何指导都将非常有帮助。提前致谢

 displayedColumns: string[] = ['id','name'];

 <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
 <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

我试过这样做但没用

 <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<div *ngIf="column.length > 0 && selectedIssueTab === issueTabs[1] || selectedIssueTab === issueTabs[2]">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
 <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</div>
</ng-container>
``

Answer 1

您在创建 <ng-container> 后应用条件将不起作用。您可以使用像 :

这样的管道来过滤您的 ngFor 循环

<ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns | filterCells:selectedIssueTab:issueTabs[1]:issueTabs[2]">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
 <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

你可以像这样制作一个管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterCells'
})
export class FilterCellsPipe implements PipeTransform {
  transform(value: any[], ...args: any[]): any {
    if (args[0] && args[1] && args[2]) {
      const selectedIssueTab = args[0];
      const issueTabs1 = args[1];
      const issueTabs2 = args[2];
      return value.filter(
        item =>
          (item.length > 0 && selectedIssueTab === issueTabs1) ||
          selectedIssueTab === issueTabs2
      );
    }
    return value;
  }
}

如何在 *ngFor mat table 中使用 ngIf 来隐藏 columns/truncate 单元格内容

Ho to use ngIf in a *ngFor mat table to hide columns/truncate cell content

angular-material

angular

mat-table