关于分页和排序的 MatTable 展开折叠图标问题

Question

我有一个 angular material table，它使用 detailRow 指令将 detail/sibling 相邻行插入到 table 行。

我想让它看起来好像该行正在展开或折叠，所以我向它添加了几个图标，这些图标在单击包含它们的单元格时切换。

<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 事件，但结果是空的。

我知道 expand/collapse 在 angular material v7 中有新的方法可以很好地处理分页和排序，但在我升级之前还需要一段时间，与此同时任何人都对如何解决这个问题有任何想法。

Answer 1

简答

在cdk-detail-row.directive.ts中添加这个

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

长答案

首先，您在 mat-row 和 mat-cell 中的 2 个地方捕获了一次点击（点击图标会触发这两个事件。点击行中的其他任何地方只会触发 onToggleChange）。而且这个 element[i] = !element[i] 是一个黑客 - （变量 i 未定义）。因此，如果您单击该行中的其他任何位置，展开图标不会改变，这就是我感到困惑的原因，因为我认为它不应该改变。该示例将仅删除对 mat-cell 的点击以使其简单。

在 table-basic-example.html 中，您应该从中删除（单击）输出并将行参数添加到方法 onToggleChange($事件，行）。并更改 *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-基本-example.ts

将关闭属性添加到界面元素

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

关于分页和排序的 MatTable 展开折叠图标问题

MatTable Expand Collapse Icon issue on pagination and sort

angular

typescript

angular-material2

angular-material-6

angular-material-table