कोणीय 2 * ngFor के साथ एक तालिका populating?

Question

मैं एक अनुरोध अनुरोध से पुनर्प्राप्त जानकारी के साथ बूटस्ट्रैप स्टाइल तालिका को पॉप्युलेट करने की कोशिश कर रहा हूं।

मुझे जानकारी ठीक मिल रही है, लेकिन यह वांछित तरीके से आउटपुट नहीं हो रहा है।

मेरा कोड यहां है;

दृश्य घटक

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

दृश्य-कर्मचारी-सूची घटक

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

हालांकि ऐसा नहीं होता उत्पादन वांछित परिणाम, यहाँ डोम पेड़ की एक छवि है;

और रेफरी तालिका मैं नकल करने की कोशिश कर रहा हूँ प्रकार के लिए;

w3schools bootstrap table

मैंने सोचा था कि टेम्पलेट वाक्य रचना नजरअंदाज कर दिया जाएगा और डोम व्याख्या क्या टेम्पलेट कंटेनर के भीतर निहित था 'जड़' के स्तर पर हो सकता है, लेकिन यह मामला नहीं है।

मुझे यकीन नहीं है कि समस्या का समाधान कैसे करें, और उम्मीद कर रहा था कि कोई सलाह दे सकता है? इस समायोजन की तरह

Answer 1

यदि आप इसके बजाय एक विशेषता चयनकर्ता का उपयोग करते हैं और उस टेम्पलेट के अंदर केवल td कॉलम बनाने के लिए दृश्य को बदलते हैं।

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

दृश्य-कर्मचारी-सूची घटक

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

Answer 2

कोशिश कुछ:

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

फिर, घटक अंदर <tr> टैग को खत्म करने और यह आधारित `" [दृश्य-कर्मचारी-सूची] "विशेषता हैं। इस तरह, टैग टेम्पलेट रैपर का हिस्सा है।