Как передать определения столбца и строки CDK через компонент

Я пытаюсь передать определения столбцов и строк через компонент, и я не знаю, как это сделать и возможно ли это вообще. Я хочу сделать это, поэтому (а) клиентский компонент может указывать определения данных, столбцов и строк, компонент-оболочка может отображать cdk-таблицу и другие украшения подкачки.

<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>

Таблица-обертка выглядит так:

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>

The error I get is

Ошибка: отсутствуют определения для верхнего, нижнего колонтитула и строки; не может определить, какие столбцы должны отображаться.

Вот StackBlitz


angular angular-cdk
person IanT8    schedule 12.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Таблица Cdk нуждается в своих определениях во время инициализации, их нет, если вы попытаетесь предоставить их позже через шаблоны или ng-контент.

Почему бы не вытащить определение таблицы внутри содержимого вашего элемента-оболочки и использовать его с ng-содержимым в компоненте-оболочке, как в этом модифицированный stackblitz?

person David Palita    schedule 12.04.2019
comment
Это потому, что я хочу, чтобы пользователь компонента-оболочки определял столбцы, иначе компонент-оболочка не является достаточно универсальным, а в моем приложении у меня есть дюжина таблиц, и мне пришлось бы создать дюжину компонентов-оболочек. - person IanT8; 12.04.2019
comment
Я не понимаю, почему в вашем stackblitz (но это может быть потому, что это урезанная версия проблемы). В модифицированном stackblitz я просто подтянул общий элемент, вы бы все равно везде использовали одну и ту же оболочку, просто она не включала бы директиву cdk-table. - person David Palita; 12.04.2019
comment
Я думаю, что это, вероятно, близко к тому, что я ищу; Я собираюсь провести расследование в эти выходные. Я заметил в cdkTable метод addColumnDef, который привел меня к следующему: stackblitz.com/edit/ - person IanT8; 12.04.2019
comment
Дэвид, мне нравится твое решение. Спасибо. Я отмечаю это как ответ. - person IanT8; 14.04.2019
comment
Есть ли способ заставить ng-content работать внутри таблицы? - person Max; 28.11.2019