Угловой 8, рендеринг основанного на таблице компонента без вложенных тегов

Question

Вот что я пытаюсь сделать. У меня есть элемент table на моей странице HTML. Таблица имеет сложную структуру строк. Каждые три строки связаны с одним элементом данных. В данный момент таблица представляет собой жестко запрограммированный HTML-код, который выглядит очень сложным / запутанным, поэтому я хотел бы создать вместо него компонент, который заменит многие элементы tr , а также позволит немного использовать * ngIf. более чисто.

Итак, для ясности, вместо этого (из существующего HTML я удалил все td , tbody и другие теги для простоты):

<table>
  <tr>Item1</tr>
  <tr>Item1</tr>
  <tr>Item1</tr>
  <tr>Item2</tr>
  <tr>Item2</tr>
  <tr>Item2</tr>
  <tr>Item3</tr>
  <tr>Item3</tr>
  <tr>Item3</tr>
</table>

Я хочу использовать это:

<table>
  <app-row item="item1"></app-row>
  <app-row item="item2"></app-row>
  <app-row item="item3"></app-row>
</table>

или что-то в этом роде:

<table>
  <app-row *ngFor="let item of items"></app-row>
</table>

ТАК ЧТО ЗДЕСЬ ПРОБЛЕМА

Когда я пытаюсьсделать это с помощью компонента, что я в конечном итоге это. Он имеет тег компонента, обернутый вокруг каждой секции tr элементов. Это не только неправильный HTML, но он ломает селекторы CSS, которые ожидают, что таблица будет выглядеть как table> tr> td .

<table>
  <app-row>
    <tr>Item1</tr>
    <tr>Item1</tr>
    <tr>Item1</tr>
  </app-row>
  <app-row>
    <tr>Item2</tr>
    <tr>Item2</tr>
    <tr>Item2</tr>
  </app-row>
  <app-row>
    <tr>Item3</tr>
    <tr>Item3</tr>
    <tr>Item3</tr>
  </app-row>
</table>

Я провел небольшое исследование, и все, кажется, рекомендуют использовать вместо него «селектор атрибутов», который может выглядеть следующим образом:

<table>
  <tr appRow item="item1"></tr>
  <tr appRow item="item2"></tr>
  <tr appRow item="item3"></tr>
</table>

Однако это приводит к наличию двойных тегов trво всех случаях.

<table>
    <tr>
        <tr>Item1</tr>
        <tr>Item1</tr>
        <tr>Item1</tr>
    </tr>
      <tr>
        <tr>Item2</tr>
        <tr>Item2</tr>
        <tr>Item2</tr>
      </tr>
      <tr>
        <tr>Item3</tr>
        <tr>Item3</tr>
        <tr>Item3</tr>
      </tr>
</table>

Кто-нибудь может порекомендовать способ создания этой структуры, чтобы у меня был правильный результирующий HTML без дополнительных тегов?

Answer 1

с помощью селектора атрибутов также является решением, но вы должны применить атрибут к <table> и оставить свой компонент для генерации <tr> s.

<table appRow *ngFor="let item of items" [itemInput]="item">
</table>