Làm cách nào để sử dụng lại các phần tử của ngFor ngay cả khi danh sách thay đổi tham chiếu?

Question

Tôi có thành phần Angular 2 sử dụng *ngFor để hiển thị một mảng lồng nhau các số.

@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[][][]; 
} 

Khi tôi thay đổi data, góc thay thế <chart> yếu tố, ngay cả khi các mảng mới có kích thước tương tự. Tôi chỉ muốn cập nhật các thuộc tính của biểu đồ nhưng giữ nguyên các phần tử (để tôi có thể tạo hiệu ứng thay đổi dữ liệu).

Có thể hiểu được rằng Angular sẽ thay thế các phần tử vì mảng mới là tham chiếu đối tượng mới. Nhưng làm thế nào tôi có thể phá vỡ điều này?

Answer 1

Sử dụng ngForTrackBy sẽ giúp bạn ở đây.

Hàm sau sẽ cập nhật thuộc tính phần tử trong khi vẫn giữ các phần tử trong DOM.

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

Answer 2

Working Plunker

Flat Cấu trúc dữ liệu

Bạn có thể tách các siêu dữ liệu về bảng xếp hạng của bạn (tiêu đề, id, vv) từ các điểm dữ liệu thực tế sẽ được thay đổi và hoạt hình.

Vòng lặp *ngFor sẽ sử dụng mảng siêu dữ liệu và mỗi thành phần biểu đồ sẽ có một @Input() sẽ lấy từ một đối tượng dữ liệu riêng biệt.

// 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] 
} 

Template

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

Sau đó, trong phần biểu đồ của bạn, bạn có thể sử dụng ngOnChanges()lifecycle hook để cập nhật bảng xếp hạng khi bạn cập nhật điểm dữ liệu của bạn.