Angular2<；天然气含量>；不'；不适合我的用例

编辑：我发现

[ngTemplateOutlet]

似乎更合适。讨论继续进行

原始问题：

我已经构建了一个表组件，我将在多个不同的视图中使用它来表示不同的数据。这些数据及其表示应该由表组件的使用者控制

我试图使用

传递一个“渲染器”，它知道如何检索数据以及如何显示数据。正如你所理解的，这是非法使用

下面是我如何尝试使用

的简化说明

这是表格组件模板：

<table>
  <thead>
  <tr>
    <th *ngFor="let column in columns">{{column.heading}}</th>
  <tr>
  </thead>
  <tbody>
  <tr *ngFor="let item of items>
    <td *ngFor="let column of columns>
      <ng-content select="{{column.template}}"></ng-content>
    </td>
  </tr>
  </tbody> 
</table>

通过这一点，我希望你明白我在努力做什么。明显的问题似乎是

在“循环”中不起作用，并且它不接受动态“选择”。此外，

项

当然不能作为表格组件消费者选择

很可能还有其他的“不要”

---

由于我是angular 2的新手，我希望我弄错了什么，或者我使用了错误的工具。有什么想法吗？

[ngTemplateOutlet]

和

[ngOutletContext]

更适合这个用例。相同用例的工作示例如所示：

---

看起来像是一个傻瓜或@GünterZöchbauer谢谢。通过这些我找到的答案，我将用它们再次攻击这个问题。或者，你能创建一个Plunker来复制和调试吗？Plunker在

[New | v]

按钮下提供了一个随时可用的Angular2 TS模板。

<my-table-component [items]="cars" [columns]="carColumns">
  <div class="model">{{item.model}}</div>
  <div class="color">{{item.color}}</div>
  <div class="gearbox>{{item.gearbox}}</div>
</my-table-component>

cars = [
  { model: "volvo", color: "blue", gearbox: "manual" },
  { model: "volvo", color: "yellow", gearbox: "manual" },
  { model: "ford", color: "blue", gearbox: "automatic" },
  { model: "mercedes", color: "silver", gearbox: "automatic" }
];
carColumns = [
  { heading: "Model", template: ".model" },
  { heading: "Color", template: ".color" },
  { heading: "Gear Box", template: ".gearbox" }
];