如何解决无法使用ngTemplateOutlet在表中显示常规内容和标题
嘿,我想使用ngTemplateOutlet在Angular中创建可重用的表组件。
在组件中,我使用这样的列表:
<app-list
[dataSource]="data$ | async"
[loading]="loading$ | async"
>
<app-column label="Date created" field="dateCreated">
<ng-template let-col let-complaint="row">
{{ complaint[col] | date }}
</ng-template>
</app-column>
...
</app-list>
columnt.component.html
<ng-template #header>
<span>{{ label }}</span>
</ng-template>
<div [attr.label]="label">
<ng-template #body let-row>
<ng-container
*ngIf="cellTemplateRef"
[ngTemplateOutlet]="cellTemplateRef"
[ngTemplateOutletContext]="{$implicit: field,row: row}"
></ng-container>
</ng-template>
</div>
list.component.ts
<table>
<thead>
<tr>
<th *ngFor="let col of columns">
<ng-container
*ngIf="headerTemplateRef"
[ngTemplateOutlet]="headerTemplateRef"
></ng-container>
</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let row of dataSource"
>
<ng-container
*ngIf="bodyTemplateRef"
[ngTemplateOutlet]="bodyTemplateRef"
[ngTemplateOutletContext]="{row: row}"
>
</ng-container>
</tr>
</tbody>
</ng-template>
</table>
结果我得到了空表。你能告诉我我的实现有什么问题吗?在列和列表组件中,我将TemplateRefs作为ContentChild装饰器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。