MatTable在分页和排序时展开折叠图标问题

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

简答

\n\n

在cdk-detail-row.directive.ts中添加以下内容

\n\n

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

\n\n

长答案

\n\n

首先，您在 mat-row 中的两个位置捕获单击，在 mat-cell 中捕获另一个位置的单击（单击图标会触发这两个事件。单击行上的其他任何位置只会触发 onToggleChange）。这element[i] = !element[i]也是一个黑客 - （变量i未定义）。因此，如果您单击该行中的其他任何位置，展开图标不会改变，这就是为什么我感到困惑，因为我认为它不会改变。为了简单起见，该示例仅删除 mat-cell 上的点击。

\n\n

在table-basic-example.html中，您应该从中删除（单击）输出，并将 row 参数添加到 onToggleChange($event, row) 方法中。并将 *ng-if 更改为监听 element.close

\n\n

<ng-container matColumnDef="expandCollapse">\n  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n  <mat-cell *matCellDef="let element"> \n     <button mat-icon-button color="primary">\n        <mat-icon id="expand_more" \xc2\xa0#expand_more *ngIf="!element.close" \xc2\xa0>expand_more</mat-icon>\n        <mat-icon id="expand_less" \xc2\xa0#expand_less *ngIf="element.close">expand_less</mat-icon>\n      </button> \n  </mat-cell>\n</ng-container>\n\n<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>\n<mat-row *matRowDef="let row; columns: displayedColumns;"\n        class="element-row"\n        [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"\n        (toggleChange)="onToggleChange($event, row)">\n</mat-row>\n

\n\n

表基本示例.ts

\n\n

向界面元素添加 close 属性

\n\n

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

\n\n

现在我们将在 onToggleChange 方法中处理行的关闭和打开。

\n\n

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

\n\n

最后，在cdk-detail-row.directive.ts中，一旦指令因分页或切换而被破坏，我们将希望关闭该行。所以我们要实现onDestroy方法

\n\n

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

\n\n

新的 ngOnDestroy 方法应该如下所示

\n\n

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

\n