我想在我的 HTML 中這樣做：
<tr *ngFor="let row of rows">
<expandable-tree-row [columns]="cols" [data]="row"></expandable-tree-row>
</tr>
在ExpandableTreeRowComponent我使用 aViewContainerRef以便td標簽作為tr元素的直接子元素放置，如下所示：
constructor(public readonly container: ViewContainerRef, private readonly cdr: ChangeDetectorRef) {
}
ngAfterViewInit(): void {
this.columns.forEach(x => this.container.createEmbeddedView(x.template))
this.cdr.detectChanges()
}
那就是在正確的位置正確添加每列的模板。但是現在我仍然有一個問題，即tr元素的第一個子元素是空的<expandable-tree-row>，因此基本上將所有列向右移動，從而弄亂了表格輸出。
我現在如何擺脫第一個“壞”元素？
如果相反，我將其設為指令并放置在tr元素上，如下所示：
<tr expandable-tree-row [columns]="cols"></tr>
然后在視覺上看起來是正確的，但是生成的 HTML 從技術上講是錯誤的，因為它最終是這樣的：
<tr>...</tr>
<td>...</td>
<td>...</td>
<tr>...</tr>
<td>...</td>
<td>...</td>
換句話說，td元素不是元素的子tr元素。
uj5u.com熱心網友回復：
如果您使用屬性選擇器選項，<tr expandable-tree-row [columns]="cols"></tr>
您只需要進行一些調整：不要ViewContainerRef在建構式中注入，而是在您的可擴展樹行模板中放入ng-template一個名為container如下的模板變數：
<ng-template #container></ng-template>
和查詢它ViewContainerRef有@ViewChild這樣的：
@ViewChild('container', { read: ViewContainerRef })
private container: ViewContainerRef;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/379939.html
標籤：有角的