typescript 如何使用angular 6在mat-table中根据条件只显示少数列?

gpnt7bae  于 2023-04-07  发布在  TypeScript
关注(0)|答案(2)|浏览(119)

我有一个垫子表,它有几个列。这里的一个条件,我需要隐藏两列。对于正常的表,我们将使用简单的ngIf条件。但对于这个垫子表,似乎是不工作。我已经尝试过了,

displayedColumns1: any[] = [
  'Ref No', 'E Type',
  { def: 'Approve', showMobile: true },
  { def: 'Transfer', showMobile: false },
  ];

    getDisplayedColumns(): string[] {
     const isMobile = this.entityRole === 'Admin';
     return this.displayedColumns1
      .filter(cd => !isMobile || cd.showMobile)
      .map(cd => cd.def);
    }

我的HTML:

<table mat-table [dataSource]="dataSource" class="">
        <tbody>
            <ng-container matColumnDef="Ref No">
                <th mat-header-cell *matHeaderCellDef> Ref No <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ ref }} </td>
            </ng-container>
            <ng-container matColumnDef="E Type">
                <th mat-header-cell *matHeaderCellDef> E Type <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ etype }} </td>
            </ng-container>
            <ng-container matColumnDef="Approve">
                <th mat-header-cell *matHeaderCellDef> Approve <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ Approve}} </td>
            </ng-container>
            <ng-container matColumnDef="Transfer">
                <th mat-header-cell *matHeaderCellDef> Transfer <br>
                </th>
                <td mat-cell *matCellDef="let element"> {{ Transfer }} </td>
            </ng-container>
       <tr mat-header-row *matHeaderRowDef="getDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: getDisplayedColumns;"> 
       </tr>     
        </tbody>
     </table>

但它给出ERROR TypeError:无法读取未定义错误的属性'diff'。任何人都可以建议我如何在mat-table中做到这一点?

5vf7fwbs

5vf7fwbs1#

您的问题是您的列名数组将自定义对象与字符串混合在一起,而您的过滤器没有考虑到这一点。

displayedColumns1: any[] = [
    'Ref No', 
    'E Type',
    { def: 'Approve', showMobile: true },
    { def: 'Transfer', showMobile: false }
];

getDisplayedColumns(): string[] {
  const isMobile = this.entityRole === 'Admin';
  return this.displayedColumns1
    .filter(cd => !isMobile || cd['showMobile'] !== false)
    .map(cd => typeof cd === 'string' ? cd : cd.def);
}
rsl1atfo

rsl1atfo2#

displayedColumns: any[]
if (this.entityRole == 'Admin')
   { this.displayedColumns = ['name', 'dob', 'grade', 'address'] }
else
   { this.displayedColumns = ['name', 'dob', 'grade']  }

相关问题