角度5：表格行中的模板绑定

Question

如何在td内绑定包含tr的模板？

我有一个表，希望动态地添加/删除/重新排列列部分。

我的td被分类为类别，用户可以选择类别，然后应该使用类别ID将表的各部分与if / then逻辑拼凑在一起。

我无法将类别模板绑定到tr中。我尝试过：

1. 将组件选择器设置为“ app-componentName”，然后使用<app-componentName></app-componentName>

输入组件

2. 将组件选择器设置为“ [app-componentName]”，然后使用<template app-componentName></template>

输入组件

，但均不能正常工作。使用第一个选项，将我类别中的所有数据放入一个td中。使用第二个选项，我的所有类别都不会显示。

这是要点...

table-row.component.ts

...
var selectedCategories = [
  {
    id: 2,
    name: "billing address"
  },
  {
    id: 1,
    name: "name"
  }
];
...

table-row.component.html

<ng-container *ngFor="let category of selectedCategories">
  <app-name-cells [person]="person" *ngIf="category.id === 1">
  <app-billing-address-cells [person]="person" *ngIf="category.id === 2">
</ng-container>

name-cells.component.html

<td>{{user.firstName}}</td>
<td>{{user.middleName}}</td>
<td>{{user.lastName}}</td>

billing-address-cells.component.html

<td>{{user.billingAddress.line1}}</td>
<td>{{user.billingAddress.line2}}</td>
<td>{{user.billingAddress.city}}</td>
<td>{{user.billingAddress.state}}</td>
<td>{{user.billingAddress.zip}}</td>

结果

//full address in first cell, full name in second cell

|| 123 Main St New York NY 12345 | John A Doe || 

预期结果

// each part of each component in it's own cell

|| 123 Main St | New York | NY | 12345 | John | A | Doe ||

编辑-添加了StackBlitz：

请参见代码示例：StackBlitz