时间戳

首页 > 解决方案 > Angular mat-table 可扩展行：如何自动扩展第一行？以及如何控制我何时折叠它？

angular - Angular mat-table 可扩展行：如何自动扩展第一行？以及如何控制我何时折叠它？

问题描述

查看 stackblitz 上的示例： https ://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html

1：如何自动展开第一行加载？

2：例如，如果我想做一些事情，比如计算我关闭一行的次数，我该怎么做？

在我的代码中，我有一个按钮来打开和关闭它：

<td style="text-align: center;" mat-cell *matCellDef="let element">
    <mat-icon (click)="expandedElement = expandedElement === element ? null : element">
                    {{expandedElement === element ? 'expand_less' : 'expand_more'}}
    </mat-icon>
</td>

很多

标签： angularangular-material

解决方案

要扩展第一个项目：

expandedElement: PeriodicElement = ELEMENT_DATA[0];

要计算扩展了多少次，已经有一个click监听器：

(click)="expandedElement = element"

你可以用它来计算。简单的例子：

(click)="toggleExpand(element)"


closedCountState = {};

toggleExpand(element) {
  if (this.closedCountState[this.expandedElement.name]) {
    this.closedCountState[this.expandedElement.name]++
  } else {
    this.closedCountState[this.expandedElement.name] = 1;
  }

  this.expandedElement = element;
}

推荐阅读