可扩展表行 td-datatable teradata Covalent答案

【问题标题】：Expandable table rows td-datatable teradata Covalent可扩展表行 td-datatable teradata Covalent
【发布时间】：2018-08-17 19:37:48
【问题描述】：

我一直在使用Teradata Covalent Datatable 来满足我的表格结构需求，在我需要创建一个可扩展的表格行之前，它非常简单易用。我已经搜索并发现mat-table directly using angular material 可以实现这一点。

我想知道是否可以使用 Teradata Covalent 的 td-datatable 来存档。

【问题讨论】：

标签： angular angular5 angular-material2 teradata-covalent

【解决方案1】：

好的，在与 gitter 上的 Teradata 人员聊天后，我想出了一个使用 CovalentCommonModule 中的 toggle 指令 的解决方案，并将其包含在自定义 td 中-datatable 我设法想出了一些接近的东西。

app.component.html

<table td-data-table #dataTable>
  <thead>
    <tr td-data-table-column-row>
      <th td-data-table-column
          *ngFor="let column of configWidthColumns"
          [numeric]="column.numeric">
        {{column.label}}
      </th>
    </tr>
  </thead>
  <tbody *ngFor="let row of data;let i=index">
    <tr class="cursor-pointer" td-data-table-row (click)="toggle(i)">
      <td td-data-table-cell *ngFor="let column of configWidthColumns" [numeric]="column.numeric">
        {{column.format ? column.format(row[column.name]) : row[column.name]}}
      </td>
    </tr>
    <tr [tdToggle]="toggleDiv[i]">
      <td colspan="7">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </td>
    </tr>
  </tbody>
</table>

app.component.ts

  toggleDiv: boolean[] = [];

  constructor(private _dataTableService: TdDataTableService) {
    this.toggleDiv = Array(this.data.length).fill().map((e, i) => true);
  }

  toggle(i: any): void {
    this.toggleDiv[i] = !this.toggleDiv[i];
  }

对于任何需要此功能的人，您可以在 stackblitz 上找到完整的实现

【讨论】：