MatTable 展开折叠图标分页和排序问题 [英] MatTable Expand Collapse Icon issue on pagination and sort

问题描述

我有一个有角度的材料表，它使用 detailRow 指令将一个细节/同级相邻行插入到表行中.

I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row.

StackBlitz

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

I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which are toggled on the click of cell containing them.

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

但是，如果我将行保持展开并进行分页或排序，则图标不会切换，因为无法切换它们.

However if the I leave the row expanded and paginate or do a sort the icons do not toggle because there's no way for them to be toggled.

我尝试连接到 page 事件或 sortChange 事件，但结果为空.

I've tried hooking into the page event or the sortChange event but came up empty.

我知道有一种新方法可以在 angular material v7 中进行展开/折叠，这可能适用于分页和排序，但在我升级之前还需要一段时间，与此同时，有人对如何进行操作有任何想法解决这个问题.

I'm aware that there's new way to do expand/collapse in angular material v7 which probably works well with pagination and sort but its gonna be a while before I upgrade, in the mean time does anyone have any ideas on how to solve this.

推荐答案

简短回答

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

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

长答案

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

Firstly, You are capturing click in 2 places once in mat-row and the other in mat-cell(Clicking on the icon triggers both events. Clicking anywhere else on the row only triggers onToggleChange). And also this element[i] = !element[i] is a hack - (variable i is undefined). So if you click anywhere else in the row the expand icon does not change this is why I got confused as I thought it is not suppose to change. The example will just take out the click on mat-cell to make it simple.

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

In table-basic-example.html you should remove the (click) output from it and add the row argument to the method onToggleChange($event, row). And change the *ng-if to listen to element.close instead

<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 属性

Add the close property to interface element

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

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

Now we will handle the close and open of the row in the method 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 方法

Lastly, In cdk-detail-row.directive.ts we will want to close the row once the directive is destroyed by pagination or toggling away. So we will implement the onDestroy method

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

新的 ngOnDestroy 方法应该是这样的

The new ngOnDestroy method should look like this

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

这篇关于MatTable 展开折叠图标分页和排序问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！