(Угловой) Использование * ngFor для заполнения таблицы

Question

Мне нужна структура таблицы примерно так:

Для этого я использую базовую таблицу Bootstrap и Angular *ngFor. Каждая ячейка таблицы заполняется различным именем из внутреннего массива.
Вот как я это делаю:

<table class="table">
    <tbody>
      <tr *ngFor="let data of User;" class={{data.nome}} id='Check_{{data.id}}'
        (click)='toggleCheckbox($event.target)'>
        <td>{{data.nome}}</td>
        <td>{{data.nome}}</td>
      </tr>
    </tbody>
</table>

Структура работает нормально, но ячейки заполнены не так, как я хотел. Каждая строка заполнена именем same, например:

и я понимаю, что это происходит из-за того, что ngFor зацикливается после изменения строки, а не для каждой новой ячейки. Проблема в том, что я не могу заполнить таблицу правильно, и если я это сделаю, я не смогу сохранить структуру таблицы нетронутой.
Есть ли лучший способ добиться этого? Использование Bootstrap или HTML5 - это нормально.
Я считаю, что основная проблема здесь (и почему я не смог найти подходящий ответ в Интернете) заключается в том, что я не знаю размер массива, поэтому размер этой таблицы является переменным, для каждого она будет заполнять новый клетка, пока она еще следует структуре.

Answer 1

вы можете создать нечетный четный фильтр, как указано здесь в ответе

Угловой 2 нгДля более / нечетных элементов

, а затем используйте в своем HTML, как показано ниже

<table class="table">
    <tbody>
<ng-container *ngFor="let data of User | evenodd:'odd'">
      <tr class={{data.nome}} id='Check_{{data.id}}'
        (click)='toggleCheckbox($event.target)'>
        <td>{{data.nome}}</td>
      </tr>
</ng-container>
<ng-container *ngFor="let data of User | evenodd:'even'">
    <tr class={{data.nome}} id='Check_{{data.id}}'
        (click)='toggleCheckbox($event.target)'>
        <td>{{data.nome}}</td>
      </tr>
</ng-container>
    </tbody>
</table>