18910140161

HTML角度材料:在动态形成的表格中隐藏列-堆栈溢出

顺晟科技

2022-10-18 13:44:17

8

我想根据打开页面时发送到页面的ID值来隐藏表中的列。我见过有一种方法,用于根据需要形成列的表。https://github.com/angular/components/issues/9940,这篇文章概述了。然而,我的桌子是这样形成的。

<代码><;表格MAT-TABLE[数据源]=";数据源";对齐=";居中";类=";垫-标高-Z8";>;<;NG-CONTAINER[MatColumnDef]=";列";*ngfor=";让getDisplayedColumns()列";>;<;th mat-header-cell*matheadercelldef>;{{column}}<;/th>;<;TD mat-cell*matcelldef=";Let元素";>;{{元素[列]}}<;/TD>;<;/NG-容器>;<;tr mat-header-row*matheaderrowdef=";显示的列";>;<;/tr>;<;tr mat-row*matrowdef=";let row;列:getDisplayedColumns();";>;<;/tr>;<;/表格>;

getDisplayedColumns()应该只返回我想要显示

的元素的数组

我对如何在我的代码中实现上述方法感到困惑,因为我的表的形式与OP的不同。


顺晟科技:

可能有很多方法可以做到这一点,但我有类似的需求,所以创建了一个组件,并在所有可能的列中传递。该组件执行许多特殊的格式设置,如布尔值=";yes";|";否";或日期日期|日期:' MM/DD/YYYY H:MM:SS A ',但对于您的情况,IsVisible似乎是您所需要的。几个关键部分:

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

因此,包括NGOnChanges,您可以检查您的ID值,并根据您想要使用的任何标准设置每列的IsVisible,并让*NGIF过滤其余部分。无论如何,这是一种选择,在性能方面可能有更好的解决方案。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航