Показывать строку таблицы матов динамически после установки флажка

Question

Я пытаюсь показать следующие шаги в моем контрольном списке с угловой таблицей матов, после того, как поставил галочку в первом столбце.

<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

Answer 1

Чтобы скрыть строки, которые не проверены, вы можете что-то вроде этого

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

[hidden]=true пока скрываем

вы можете увидеть пример here

Answer 2

Я обновил ваш stackbliz: https://stackblitz.com/edit/angular-fwnnzf-3p7xvo

объяснение:

подготовьте список шагов при инициализации приложения.

prepareSteps(){
    this.checklistSteps = [];
    for(let i = 0; i < STEPS_MOCK.length ; i++){
      let currStep = STEPS_MOCK[i];

      //push the step to stepList.
      this.checklistSteps.push(currStep);

      //if the last pusded step is not checked then our list is complete so exit the loop
      if(!currStep.checked){
        break;
      }
    }
  }

затем при каждом изменении флажка обновите событие потомкашаги, а затем подготовить список с обновленными stpes.

Надеюсь, это поможет.