угловой 5: привязка шаблона в строке таблицы

Question

Как связать шаблон, содержащий td s в пределах tr?

У меня есть таблица, в которую я хочу динамически добавлять / удалять / переставлять разделы столбцов.

Мои td сгруппированы в категории, пользователь может выбирать категории, и затем разделы таблицы должны быть объединены с логикой if / then с использованием идентификаторов категорий.

IУ меня проблемы с привязкой шаблонов моей категории к 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