bir tablo angular2 * ngFor ile dolduruluyor mu?

Question

Bir önyükleme talebi tablosundan alınan bilgiler içeren bir önyükleme tablosu tabloyu yerleştirmeye çalışıyorum.

Bilgileri iyi alıyorum, ancak istenen şekilde çıkmıyor.

İşte kodum;

görünüm bileşeni

<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> 

görünüm-çalışan-liste bileşeni

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

Ancak öyle değil çıktı istenen sonuç, burada dom ağacının bir görüntü;

ve ref ben çoğaltmak için çalışıyorum tablonun tür için

;

w3schools bootstrap table

Ben ancak bu durum böyle değil, şablon sözdizimi göz ardı edilecek ve dom 'kök' seviyede olmak şablon kap içinde bulunan ne yorumlamak düşündüm.

Sorunu nasıl çözeceğimi bilmiyorum ve birilerinin size tavsiyede bulunmasını umuyordum? Bu ayarlama gibi

Answer 1

Bunun yerine bir öznitelik seçicisi kullanırsanız ve görünümü yalnızca bu şablonun içindeki sütunları td oluşturmak için değiştirin.

<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> 

görünüm-çalışan-liste bileşeni

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

Answer 2

deneyin şey:

Sonra

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

, bileşenlerin içinde <tr> etiketleri ortadan kaldırmak ve onu "[görünüm-çalışan-listesi]" temelli `bağlıyor olun. Bu şekilde, etiket şablon sargısının bir parçasıdır.