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做到这一点。试试这个：

table.component.ts

@Input() tpl: TemplateRef<any>;

table.component.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 table。你可以节省很多时间。

多次渲染ng-content

1 个答案: