Angular 2 - 可展开的 table 行包含另一个 table

Question

我正在寻找一个数据table，它具有包含其他行的可扩展行（基本上是 table 中的 table）。

我找到了 PrimeNG example，但这只会在展开时显示有关同一行的更多信息。似乎有一些 AngularJS 示例，但我找不到 Angular 2.

这是我在 Bootply 上寻找的另一个示例，但是当我使用它时，行不会扩展。我在 index.html 中导入了 bootstrap 样式表，我可以使用其他 bootstrap 功能。

Answer 1

您可以在行扩展模板中添加一个 primeng 数据table，并将数据table 的值设置为一行的属性（通常是数组）。

<ng-template let-cp pTemplate="rowexpansion">
      <p-dataTable *ngIf="cp.associated_seasons" #dtSeasons [value]="cp.associated_seasons">
      </p-dataTable>
</ng-template>

此处 "cp" 是您对主数据 table 中的一行的引用，而 cp.associated_seasons 是对名为 "associated_seasons" 的行的属性的引用。

Angular 2 - 可展开的 table 行包含另一个 table

Angular 2 - Expandable table row containing another table

angular

primeng