Question

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的自定义模板？

Answer 1

不幸的是，你将无法实现这一目标。他们正在努力为他们的桌子添加棒头支持。

我对这个包含您正在寻找的功能的库有好运： https://github.com/swimlane/ngx-datatable

Angular（2）材质表（mat-table）的自定义模板

1 个答案: