自定義角度組件不會在模板中呈現爲TR

我正在重新設計表格，我想介紹自己的自定義組件，而不是默認的TR元素。該表按預期工作，看起來像這樣。自定義角度組件不會在模板中呈現爲TR

<table> 
    <thead> 
    <tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let row of this.rows"></tr> 
    </tbody> 
</table>

然後，我介紹了我自己的組件代替通常的TR和切換網格的標記以下內容。

<table> 
    <thead> 
    <tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr> 
    </thead> 
    <tbody> 
    <row *ngFor="let row of this.rows" [value]="row" [formats]="columns"></row> 
    </tbody> 
</table>

新組件的標記是非常基本的，如下所示。

<td *ngFor="let format of formats"> 
    {{value[format.id]}} 
</td>

它的工作，種。即我可以看到值，但 al生成的TD（我可以確認檢查devtools）在表格的第一列中顯示。所以數據綁定起作用。標記的生成工作。唯一失敗的是，愚蠢的瀏覽器沒有得到該行應該在一行（如TR是）。它認爲它可以呈現爲單個TD。

如何告訴愚蠢的瀏覽器做我的意思，而不是我說的？

來源

2017-05-08 Konrad Viltersten

我認爲這是因爲它不會將row識別爲tr，因此它不能正確呈現table。

嘗試使用您的組件是這樣的：

@Component({ 
    selector: '[row]', 
    template: ` 
    <td *ngFor="let format of formats"> 
     {{value[format.id]}} 
    </td> 
    ` 
})

，然後在表：

<tr row></tr>

這樣，大家識別tr作爲tr，但它會像你想到：使用您的row組件。

（我有同樣的問題與一個自定義菜單元素。它不承認li元素。使用<li my-element>固定的問題。）

來源

2017-05-08 10:04:37 SrAxi

_「這就是所謂的屬性指令」 _不，它不是。你爲什麼要調用其他組件，僅僅因爲選擇器改變了？ – zeroflagL

@zeroflagL事實上，在閱讀你的評論之後，我意識到我只是改變了組件的調用方式，我沒有使用'@ Directive'來創建實際的** Attribute指令**。他的組件仍然是一個組件，因爲它使用'@ Component'，即使它被調用，就像它是一個指令一樣。感謝您指出。 – SrAxi

@zeroflagL你是說這個建議有缺陷嗎？根據我目前的困惑程度，我真的不敢說。我接受了這個答覆，因爲這個答案已經解決了 - 這些列按照現在的設想呈現。但是，我擔心我正在學習錯誤的模式（同時，爲將來的用戶留下他們可能依賴並保持錯誤的蹤跡）。你怎麼看？ –

自定義角度組件不會在模板中呈現爲TR

回答

相關問題