リストの参照が変更された場合でもngForの要素を再利用する方法は？

Question

私は数値のネストされた配列をレンダリングするために*ngForを使用する角2コンポーネントを持っています。

@Component({ 
    selector: 'app', 
    template: ` 
    <div *ngFor="let row in data"> 
     <div *ngFor="let curve in row"> 
     <chart [data]="curve"> 
     </div> 
    </div> 
    `, 
    directives: [Chart], 
}) 
export default class App { 
    data: number[][][]; 
} 

私はdataを変更、角度は、新しい配列が同じ次元を持っている場合でも、<chart>要素を置き換えます。私は、チャートのプロパティを更新するだけで、データの変更をアニメートできるように要素を保持することが欲しいです。

新しい配列が新しいオブジェクト参照であるため、Angularが要素を置き換えることは理解できます。しかし、どうすればこれを回避できますか？

Answer 1

ngForTrackByを使用すると、ここをクリックしてください。

次の関数は、要素をDOM内に保持しながら要素のプロパティを更新する必要があります。

trackByIndex(index: number, data: any) { return index; } 

Answer 2

Working Plunker

フラットデータ構造

あなたは変化し、アニメーションされる実際のデータポイントから、あなたのチャートについてのメタデータ（タイトル、IDなど）を分離することができます。

ループはループはメタデータ配列を使用し、各チャートコンポーネントはデータポイントの別のオブジェクトからプルする@Input()を持ちます。

// Metadata 
this.charts = [ 
    { 
    id: 1, 
    title: 'Chart Title 1', 
    }, 
    { 
    id: 2, 
    title: 'Chart Title 2', 
    } 
]; 

// Data Points 
this.chartData = { 
    1: [87, 95, 121, 20, 60, 131, 10, 139, 128, 99], 
    2: [56, 107, 107, 144, 43, 7, 67, 35, 141, 62] 
} 

テンプレート

<div *ngFor="let chart of charts"> 
    <app-chart [inputMeta]="chart" [inputData]="chartData[chart.id]"></app-chart> 
</div> 

は、その後、あなたのチャートコンポーネントにあなたがあなたのデータポイントを更新するときに、チャートを更新するngOnChanges()lifecycle hookを使用することができます。