Блог

Главная - Вопросы по программированию - используйте ngif, чтобы скрыть строку в mat-table

используйте ngif, чтобы скрыть строку в mat-table

#angular #mat-table

#angular #mat-таблица

Вопрос:

Я пытаюсь скрыть строку после нажатия кнопки в mat-таблице. Я не знаю, куда поместить *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>amp;nbsp; amp;nbsp; amp;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>

Комментарии:

1. Пожалуйста, добавьте код TS, который повлиял бы на переменную, используемую в *ngIf .

2. Я думаю, самый простой способ сделать это — просто обновить [dataSource] событие after щелчка и не выполнять никаких материальных упражнений. гимнастика.

Ответ №1:

Другой способ — добавить класс mat-row и использовать CSS, чтобы скрыть его.

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

Вы также можете посмотреть аналогичный пример с сайта материалов Angualr:
https://stackblitz.com/angular/voqbanbobpa?file=app/table-expandable-rows-example.ts

Комментарии:

1. правильно. ngStyle / ngClass вероятно, здесь было бы более уместно

Ответ №2:

В вашем случае вам нужно изменить свой dataSource объект из кода компонента application и удалить строку, которую вы хотите скрыть.

Это зависит от вашего кода компонента, но вы, скорее всего, сделаете:

 this.application = this.application.splice(i, 1);
Метки: ,