#angular #angular-cdk
#angular #angular-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>
Ошибка, которую я получаю,
Ошибка: отсутствуют определения для верхнего, нижнего колонтитула и строки; не удается определить, какие столбцы должны отображаться.
Вот StackBlitz
Ответ №1:
Таблица Cdk нуждается в своих определениях во время инициализации, их нет, если вы попытаетесь предоставить их позже с помощью шаблонов или ng-содержимого.
Почему бы не поместить определение таблицы в содержимое вашего элемента-оболочки и использовать его с ng-содержимым в компоненте-оболочке, как в этом модифицированном стекблите?
Комментарии:
1. Это потому, что я хочу, чтобы пользователь компонента-оболочки определял столбцы, иначе компонент-оболочка недостаточно универсален, и в моем приложении у меня есть дюжина таблиц, и мне пришлось бы создать дюжину компонентов-оболочек.
2. Я не понимаю, почему в вашем stackblitz (но это может быть потому, что это урезанная версия проблемы). В модифицированном stackblitz я только что вытащил универсальный элемент, вы все равно будете использовать везде одну и ту же оболочку, она просто не будет включать директиву cdk-table.
3. Я думаю, что это, вероятно, близко к тому, что я ищу; Я собираюсь исследовать в эти выходные. Я обнаружил метод в cdkTable под названием «addColumnDef», который привел меня к этому: stackblitz.com/edit /…
4. Дэвид, мне нравится ваше решение. Спасибо. Я отмечаю это как ответ.
5. Есть ли обходной путь для
ng-content
работы внутри таблицы?