カスタムの角型コンポーネントがテンプレートとしてTRとしてレンダリングされない

Question

テーブルを再設計していて、デフォルトの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> 

これは機能します。私。 でもの値が生成されています（私はdevtoolsの確認を確認できます）がテーブルの最初の列に表示されます。したがって、データバインディングが機能します。マークアップの生成は動作します。失敗する唯一のことは、愚かなブラウザは行が（TRのように）想定されることを得られないということです。単一のTDとしてレンダリングできると考えています。

私は愚かなブラウザに私が言ったことではなく、私が何を意味するのか教えてください。

Answer 1

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>を使用して問題を修正しました。）