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

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

0 голосов
/ 14 декабря 2018

У меня есть таблица угловых материалов, которая использует директиву 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, который, вероятно, хорошо работает с нумерацией страниц и сортировкой, но до обновления у меня будет некоторое время, в то время как у кого-нибудь есть какие-либо идеи по поводукак решить это.

1 Ответ

0 голосов
/ 17 декабря 2018

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

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

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

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

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

В 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>

table-basic-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;
}

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

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

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

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