5

我有一个角度材料表，它使用 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 中进行扩展/折叠，这可能适用于分页和排序，但在我升级之前还需要一段时间，同时有人对如何解决这个问题有任何想法。

4

1 回答 1

3

简答

在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($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>

表基本示例.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;
}

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

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

新的 ngOnDestroy 方法应该如下所示

ngOnDestroy(): void {
  this.row.close = false;
}
于 2018-12-17T04:02:55.197 回答