我創建了一個簡單的串列并且作業正常。將行內容移動到其他子組件后，布局中斷了。主組件或子組件中沒有使用額外的 CSS。這是確定的布局：
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>productName</th>
<th>companyName</th>
<th>categoryName</th>
<th>quantityPerUnit</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product_item of input_productListData">
<td><span>{{product_item.productID}}</span></td>
<td><span>{{product_item.productName}}</span></td>
<td><span>{{product_item.fkSupplier.companyName}}</span></td>
<td><span>{{product_item.fkCategory.categoryName}}</span></td>
<td><span>{{product_item.quantityPerUnit}}</span></td>
</tr>
</tbody>
</table>
得到了這個：
現在我將行移動到其他組件并得到這個：
如何解決這個問題？
uj5u.com熱心網友回復：
這實際上與引導程式完全無關。當您創建這樣的組件時...如果您在開發控制臺中檢查模板，它應該顯示類似...
<tr ....
<app-product-simple-list-row....
這歸結為app-product-simple-list-row在 html 表中無效。
您可以通過使用屬性選擇器來克服這個問題，這會將您的模板轉換為類似...
<tr app-product-simple-list-row ...
如果您要查看開發控制臺。所以這樣做：
將您的組件選擇器更改為：
@Component({
selector: '[app-product-simple-list-row]',
// ...
})
并在父模板中使用它，例如：
<tr app-product-simple-list-row *ngFor="...."></tr>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/344565.html