MatTable Expand Collapse Icon проблема с разбиением на страницы и сортировкой

Question

У меня есть угловая таблица материалов, которая использует директиву detailRow для вставки соседней строки детали / брата в строку таблицы.

StackBlitz

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

<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <mat-cell *matCellDef="let element"> 
         <button mat-icon-button color="primary"  (click)="element[i] = !element[i]">
            <mat-icon id="expand_more"  #expand_more *ngIf="!element[i] "  >expand_more</mat-icon>
            <mat-icon id="expand_less"  #expand_less *ngIf="element[i] ">expand_less</mat-icon>
          </button> 
      </mat-cell>

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

Я пытался подключиться к page событие или sortChange событие, но вышло пустым.

Я знаю, что есть новый способ развернуть / свернуть в угловом материале v7, который, вероятно, хорошо работает с нумерацией страниц и сортировкой, но это займет некоторое время, прежде чем я обновлюсь, в то же время у кого-нибудь есть идеи, как решить эту проблему.

Answer 1

Короткий ответ

В cdk-detail-row.directive.ts добавьте это

  ngOnDestroy(): void {
    this.row[undefined] = false;
  }

Длинный ответ

Во-первых, вы захватываете щелчок в 2 местах один раз в строке mat, а другой - в строке mat (щелчок по значку запускает оба события. Щелчок в любом месте строки вызывает только onToggleChange). А также это element[i] = !element[i] это хак - (переменная i не определено). Поэтому, если вы щелкнете где-нибудь еще в строке, значок расширения не изменится, поэтому я запутался, так как думал, что менять не стоит. Пример просто убирает клик на mat-cell, чтобы сделать его простым.

В table-basic-example.html вы должны удалить из него вывод (click) и добавить аргумент строки в метод onToggleChange($event, row). И измените *ng-if для прослушивания element.close вместо

<ng-container matColumnDef="expandCollapse">
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
  <mat-cell *matCellDef="let element"> 
     <button mat-icon-button color="primary">
        <mat-icon id="expand_more"  #expand_more *ngIf="!element.close"  >expand_more</mat-icon>
        <mat-icon id="expand_less"  #expand_less *ngIf="element.close">expand_less</mat-icon>
      </button> 
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
        class="element-row"
        [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"
        (toggleChange)="onToggleChange($event, row)">
</mat-row>

стол-основные-example.ts

Добавьте свойство close к элементу интерфейса

export interface Element {
    name: string;
    position: number;
    weight: number;
    symbol: string;
    close?: boolean;
}

Теперь мы будем обрабатывать закрытие и открытие строки в методе onToggleChange.

onToggleChange(cdkDetailRow: CdkDetailRowDirective, row: Element): void {
    if (this.singleChildRowDetail && this.openedRow && this.openedRow.expended) {
        this.openedRow.toggle();
    }
    if (!row.close) {
        row.close = true;
    } else {
        row.close = false;
    }
    this.openedRow = cdkDetailRow.expended ? cdkDetailRow : undefined;
}

Наконец, в cdk-detail-row.directive.ts мы хотим закрыть строку, как только директива будет уничтожена разбиением на страницы или переключением. Таким образом, мы будем реализовывать метод onDestroy

export class CdkDetailRowDirective implements OnDestroy{
     ...Details of implementation.....
}

Новый метод ngOnDestroy должен выглядеть следующим образом

ngOnDestroy(): void {
  this.row.close = false;
}