如何通过组件传递 CDK 列和行定义

Question

我正在尝试通过组件传递列和行定义，但我不确定该怎么做，或者是否可能。我想这样做，所以 (a) 客户端组件可以指定数据、列和行定义，包装组件可以呈现 cdk-table 加上其他分页装饰。

<app-wrapper-table [data]="data">

  <ng-container cdkColumnDef="firstName">
    <th cdk-header-cell *cdkHeaderCellDef>First Name</th>
    <td cdk-cell *cdkCellDef="let item">{{item.firstName}}</td>
  </ng-container>

  <ng-container cdkColumnDef="lastName">
    <th appHeaderCell *cdkHeaderCellDef>Last Name</th>
    <td cdk-cell *cdkCellDef="let item">{{item.lastName}}></td>
  </ng-container>

  <ng-container cdkColumnDef="availability">
    <th appHeaderCell *cdkHeaderCellDef>Availability</th>
    <td cdk-cell *cdkCellDef="let item">{{item.availability}}></td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>

</app-wrapper-table>

包装器 table 看起来像这样：

import { Component, OnInit, Input, TemplateRef, ContentChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-wrapper-table',
  templateUrl: './my-wrapper-table.component.html',
  styleUrls: ['./my-wrapper-table.component.scss']
})
export class MyWrapperTableComponent implements {
  @Input() data: any[];
  @ContentChild(TemplateRef) template: TemplateRef<any>;
}

<div>
  <div>Some Heading</div>
</div>
<table cdk-table [dataSource]="data">
  <ng-container [ngTemplateOutlet]="template"></ng-container>
</table>
<div class="paging-controls">
  <div class="paging-buttons">
    <button type="button">Previous</button>
    <button type="button">Next</button>
  </div>
  <div class="paging-size">
    <span>Page Size</span>
  </div>
</div>

我得到的错误是

Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered.

这是一个StackBlitz

Answer 1

Cdk table 在初始时需要它的定义，如果您稍后尝试通过模板或 ng-content 提供它们，则有 none。

为什么不将 table 定义拉入包装器元素的内容中，并像 modified stackblitz 那样在包装器组件中将其与 ng-content 一起使用？

如何通过组件传递 CDK 列和行定义

How to Pass CDK column and row definitions through a component

angular

angular-cdk