使用 ngif 隐藏 mat-table 中的一行答案

【问题标题】：use ngif to hide a row in mat-table使用 ngif 隐藏 mat-table 中的一行
【发布时间】：2019-05-22 20:52:59
【问题描述】：

单击垫表中的按钮后，我试图隐藏一行。我不知道把*ngIf放在哪里。我试过ng-container，但它不起作用。下面是我的 HTML 文件。

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="application">
  <ng-container matColumnDef="ID">
    <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.id}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="Name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="ApplicationDate">
    <mat-header-cell *matHeaderCellDef>Application Date</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.applyDate}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="TrackingNumber">
    <mat-header-cell *matHeaderCellDef>Tracking Number</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.trackNumber}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="Operation">
    <mat-header-cell *matHeaderCellDef>Operation</mat-header-cell>
    <mat-cell *matCellDef="let application">
      <button mat-raised-button color="primary" (click)="onClickGrant()">Grant</button>&nbsp; &nbsp; &nbsp;
      <button mat-raised-button color="warn" (click)="onClickDeny()">Deny</button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5,10,15,20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

【问题讨论】：

请添加会影响*ngIf中使用的变量的TS代码。
我想最简单的方法就是在点击事件后更新你的[dataSource]，而不是做任何 Material 体操。

标签： angular mat-table

【解决方案1】：

另一种方法是给mat-row添加类并使用CSS隐藏它。

<mat-row *matRowDef="..." [class.hidden]="YOUR_IF_HERE"></mat-row>

您还可以查看来自 Angualr Material 网站的类似示例： https://stackblitz.com/angular/voqbanbobpa?file=app%2Ftable-expandable-rows-example.ts

【讨论】：

正确。 ngStyle / ngClass 在这里可能更合适

【解决方案2】：

您需要从组件代码中修改您的dataSource 对象，在您的情况下为application，并删除您要隐藏的行。

这取决于您的组件代码，但您很可能会这样做：

this.application = this.application.splice(i, 1);

【讨论】：