多次渲染 ng-content

Question

我想创建包含数据的表，但最后一列应该由用户定义ng-content

像这样的东西：

<my-component [columns]="columns" [data]="data">
    <div>last column</div>
<my-component>

MyComponent.ts

<table>
    <tr *ngFor="let row of data">
        <td *ngFor="let cell of columns">{{row[cell}}</td>
        <td><ng-content></ng-content></td>
    </tr>
</table>

问题是最后一列的内容仅在最后一行中呈现一次。怎么解决呢？？

Answer 1

你不能用 ng-content 来做到这一点。尝试这个：

表.组件.ts

@Input() tpl: TemplateRef<any>;

表.组件.html

<table>
  <tr *ngFor="let row of data">
    <td *ngFor="let cell of columns">{{row[cell}}</td>
      <td>
        <ng-container [ngTemplateOutlet]="tpl"></ng-container>
       </td>
  </tr>
</table>

然后你可以像这样使用它：

<my-component [columns]="columns" [data]="data" [tpl]="lastColumn"><my-component>

<ng-template #lastColumn>
  <div>last column</div>
</ng-template>

话虽如此，在实现我自己的表之前，我会先看一下Angular Material CDK 表。这样你可能会节省很多时间。