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.

我试过挂接到页面事件或 sortChange 事件，但为空。

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

我知道有一种新方法可以在角形材质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 中，您应该删除（点击）输出，并将row参数添加到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屋！