可扩展 table 行，可扩展来自不同数据源的更多行集

Question

如何在单击某一行时展开 table 行，它会在与 table 相同的列中显示例如 4 到 5 组行。我在这里使用 angular-material。

我想单击 table 中的一行，这将展开共享同一 table 列的另一组行，但来自table 但仅共享列 header

当点击其中一行时，它将显示如下：

然后在展开的行上再次单击时它将 return 变为默认值 table

回到这个：

如果点击两行就会像这样

我正在使用 angular 8 和 typescript

Answer 1

如果您使用的是 mat-table，它只会向数组添加一个新的属性（例如“扩展”），然后只需

重新放置 div

中展开的条件

<div class="example-element-detail"
   [@detailExpand]="element.expanded? 'expanded' : 'collapsed'">
...
</div>

以及行

中的（点击）功能

<tr mat-row ...
      [class.example-expanded-row]="expandedElement === element.expanded"
      (click)="element.expanded=!element.expanded">
</tr>

如果您使用的是 onw table，则相同，请向“数组”的每个元素添加一个新的属性“扩展”并使用此属性

注意：您还可以创建布尔数组

expanded:boolean[]=[]

并且使用这个数组，如果在*ngFor你使用*ngFor="let item of myArray;let i=index"

(click)="expanded[i]=!expanded[i]"

和

*ngIf="expanded[i]"

Expandable table row that expand more set of rows coming from different datasource