时间戳

首页 > 解决方案 > 选中复选框后动态显示 mat-table 行

angular - 选中复选框后动态显示 mat-table 行

问题描述

在选中第一列中的复选框后，我正在尝试使用 angular mat-table 在我的清单中显示下一步。

<table mat-table [dataSource]="checklist.checklistStepList" matSort>

  <ng-container matColumnDef="checked">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Checked</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"><mat-checkbox [checked]="step.result==='CHECKED'" (change)="updateCheck(step)"></mat-checkbox></td>
  </ng-container>

  <ng-container matColumnDef="step">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Step</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.title}}</td>
  </ng-container>

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.description}}</td>
  </ng-container>

  <ng-container matColumnDef="owner">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Owner</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.owner}}</td>
  </ng-container>

  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.date}}</td>
  </ng-container>

  <ng-container matColumnDef="assignment">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Assignments</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.assignment}}</td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="columnToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnToDisplay"></tr>
</table>

正如您在此处看到的，我正在尝试使用该函数隐藏/显示我的清单步骤，该函数displayStep(step)只是一个告诉我是否应该显示该步骤并返回布尔值的函数。

这里的问题是我的step参数无法识别。

我希望看到第一步的输出，然后在检查后显示下一步。

Stackblitz：https ://stackblitz.com/edit/angular-fwnnzf

标签： angularangular-material

解决方案

要隐藏未检查的行，您可以这样做

<tr mat-header-row *matHeaderRowDef="columnToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnToDisplay" [hidden]="!row.checked">
</tr>

[hidden]=true 同时隐藏它

你可以看到这个例子here

推荐阅读