zapełnianie tabeli za pomocą opcji angle2 * ngFor?

Question

Próbuję wypełnić tabelę stylu ładowania początkowego informacjami pobranymi z żądania pobierania.

Dostaję informacje w porządku, ale nie są one przesyłane w pożądany sposób.

Oto mój kod;

widok komponent

<div class="col-md-12"> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <view-employee-list [employee]="employee" *ngFor="let employee of employees" ></view-employee-list> 
     </tbody> 
    </table> 
</div> 

view-pracownik-lista komponentów

<tr> 
    <td>{{employee.name}}</td> 
</tr> 

Jednak to nie wyjście pożądany wynik, tutaj jest obraz drzewa DOM;

i ref rodzaju stołu staram się powielać;

w3schools bootstrap table

Myślałem, że składnia szablon zostanie zignorowany, a dom będzie zinterpretować to, co zostało zawarte w pojemniku szablon być na poziomie „root”, jednak nie jest to przypadek.

Nie jestem pewien, jak rozwiązać problem i miałem nadzieję, że ktoś może udzielić porady?

Answer 1

Jeśli zamiast tego użyjesz selektora atrybutu i zmienisz widok, aby utworzyć tylko kolumny td wewnątrz tego szablonu.

<div class="col-md-12"> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr view-employee-list [employee]="employee" *ngFor="let employee of employees" ></tr> 
     </tbody> 
    </table> 
</div> 

view-pracownik-lista komponentów

selector: '[view-employee-list]' 
template: '<td>{{employee.name}}</td>' 

Answer 2

Spróbuj coś takiego dostosowania:

<tbody> 
    <tr view-employee-list [employee]="employee" *ngFor="let employee of employees"></tr> 
</tbody> 

Następnie wyeliminować <tr> tagów wewnątrz elementu i sprawiają, że atrybut ` "[zobacz-pracownika-list]" w oparciu. W ten sposób tag jest częścią opakowania szablonu.