HTML Angular Material：在动态形成的表格中隐藏列

Posted 2023-03-13

【中文标题】HTML Angular Material：在动态形成的表格中隐藏列

【英文标题】：HTML Angular Material: Hide Columns in a dynamically forming table

【发布时间】：2021-11-17 05:56:13

【问题描述】：

我想根据打开页面时发送到页面的 ID 值隐藏表中的列。我已经看到有一种方法可以用于根据需要形成列的表...https://github.com/angular/components/issues/9940 这篇文章概述了这一点。但是我的表是这样形成的。

 <table mat-table [dataSource]="dataSource" align="center" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of getDisplayedColumns()">
    <th  mat-header-cell *matHeaderCellDef > column </th>
    <td  mat-cell *matCellDef="let element" > element[column] </td>
  </ng-container>
    <tr  mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
    <tr  mat-row *matRowDef="let row; columns:  getDisplayedColumns();" ></tr>
 </table>

getDisplayedColumns() 应该只返回我想要显示的元素的数组

鉴于我的表格与 OP 的表格不同，我对如何在我的代码中实现上述方法感到困惑。

【参考方案1】：

可能有很多方法可以做到这一点，但我有类似的需求，所以创建了一个组件并传入所有可能的列。该组件执行许多特殊格式设置，例如 booleans = "yes" | “否”或日期日期 | date:'MM/dd/yyyy h:mm:ss a'，但对于你的情况，isVisible 是你似乎需要的。几个关键部分：

export interface IPaginateRowAttributes 
attributeName: string;
listLabel: string;
listFormat: string;
isAttribute: boolean;
lookupIndex: number;
isVisible: boolean;



@Input() rowColumns: IPaginateRowAttributes [] = [];
@Input() yourId


<tr *ngFor="let dynamicListRowAttribute of dynamicListRowAttributes">

<ng-container *ngIf="dynamicListRowAttribute.listFormat=='number' && dynamicListRowAttribute.isVisible==true" matColumnDef=dynamicListRowAttribute.compositeKey>
              <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="sort(dynamicListRowAttribute.attributeName, true, dynamicListRowAttribute.listFormat)"> dynamicListRowAttribute.listLabel </th>
              <td mat-cell *matCellDef="let element"> element['attributes'][dynamicListRowAttribute.attributeName] | currency </td>
            </ng-container>

<ng-container> more format options</ng-container>

ngOnChanges(changes: SimpleChanges) 
let returnHeaders: string[] = [];
for (let detail of displayColumns) 
      returnHeaders.push(detail.dictionaryCompositeKey);
    

所以这里包括 ngOnChanges，您可以检查您的 ID 值并根据您想要使用的任何标准为每列设置 isVisible，然后让 *ngIf 过滤其余部分。无论如何，这是一种选择，在性能方面可能会有更好的解决方案。