无法使用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 (将#修改为@）