Angular（2）材料表（mat-table）的自定义模板答案

【问题标题】：Custom template for Angular (2) Material Table (mat-table)Angular（2）材料表（mat-table）的自定义模板
【发布时间】：2017-09-11 21:45:15
【问题描述】：

推荐使用mat-table 生成以下元素结构：

<mat-table>
  <mat-header-row>...</mat-header-row>

  <mat-row>...</mat-row>
  ...
  <mat-row>...</mat-row>
</mat-table>

有没有办法强制使用一些自定义模板，以便将常规行元素包装到某个父元素（例如 div）中，以将它们与标题行元素分开（为了使表体可滚动）？结果应该是这样的：

<mat-table>
  <mat-header-row>...</mat-header-row>

  <div>
    <mat-row>...</mat-row>
    ...
    <mat-row>...</mat-row>
  </div>
</mat-table>

我想出的唯一解决方案是自定义表格组件，例如：

@Component({
  selector: 'my-cool-table',
  template: `
       <ng-container headerRowPlaceholder></ng-container>
       <div>
           <ng-container rowPlaceholder></ng-container>
       </div>`,
  host: {
    'class': 'mat-table',
  },
  styleUrls: [
    'my_cool_table.css',
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyCoolTable<T> extends CdkTable<T> {}

但是也有一些负面的方面，比如继承 mat-table 样式表。那么问题来了：mat-table 可以直接使用自定义模板吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

很遗憾，您将无法正常工作。他们正在努力为他们的桌子添加棒头支持。

我很幸运地使用了这个包含您正在寻找的功能的库： https://github.com/swimlane/ngx-datatable

【讨论】：