テンプレートは、角度2.2のバージョン後に変更モデル

Question

問題

後に動作しません。 *、アプリケーションの一部のコンポーネントで、データを更新した後にデータが正しく表示されないという問題が発生したことがわかりました（リストに正しいサイズが表示され、最初のアイテムのデータのみが表示されます）。私は、問題のthis Plunker with a simple exampleを作成

デモンストレーション

。発生する問題の

<list-component [data]="list"> 
    <template pTemplate let-item> 
     <b *ngIf="item % 2 == 0">{{item}}</b> 
     <del *ngIf="item % 2 != 0">{{item}}</del> 
    </template> 
</list-component> 

手順：

使用このタイプの問題を引き起こす

1. オープンPlunker例。
2. 2番目のブロックの表題（*ngIfのテンプレート:)
3. [更新]ボタンをクリックします。
4. もう一度2番目のブロック（*ngIfのテンプレートを参照）を見てください。

この問題の原因とどのようにそれを解決するためにすることができますどのような質問

？

Answer 1

* ngのテンプレート内には、複数のTemplateRefがあります。データが変更されると、それは混合されます。

1）ですから、あなたが正確たとえば、あなたの目的のために使用しているNG-コンテンツ内のどのテンプレートを指定する必要があります。

<list-component [data]="list"> 
    <template #tmpl let-item> <== notice #tmpl 
    <b *ngIf="item % 2 == 0">{{item}}</b> 
    <del *ngIf="item % 2 != 0">{{item}}</del> 
    </template> 
</list-component> 

してからListComponentに：

@ContentChild('tmpl') template: TemplateRef<any>; 

Plunker Example

PSなぜngTemplateOutletまたはngForTemplateのソリューションを使用していないのですか？例については

：

• How to pass an expression to a component as an input in Angular2?

2）と私はあなたの例PrimeTemplateディレクティブに気づきました。そこでここでは二番目のオプションである：

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate; 

とhtml：

<template-loader [data]="item" [template]="primeTmpl.template"></template-loader> 

Plunker Example