Как обновить только часть списка?

Question

Контекст:

• Объекты в списке
• Список заменяется другим список с теми же элементами плюс/минус объектом

Проблема: Каждый пункт в моем списке разрушен и воссоздан даже если вход тот же самый

Причина, по которой список заменен другим списком, заключается в том, что за ним наблюдает (наблюдаемый) (angularfire2). Как я могу избежать перегрузки всего списка? Есть ли способ создать отдельный наблюдаемый для каждого элемента в этом списке и вместо этого позволить тем, кто слушает изменения?

Неясно, должно ли это быть отмечено с помощью angularfire2, поскольку я могу создать ту же проблему в угловом2. Оставляя некоторые angularfire2 в комментариях

Plnkr: http://plnkr.co/edit/qSX9nRGGVNUkD5qIHOMl?p=preview

import { Component, Input } from '@angular/core'; 
//import { AngularFire, FirebaseListObservable } from 'angularfire2'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Component({ 
    selector: 'my-app', 
    template: '<p *ngFor="let item of items | async"><test [options]="item"></test></p>' 
}) 
export class AppComponent { 
    public items = new BehaviorSubject([{bah: 1},{bah: 2},{bah: 3}]); 
    //public items: FirebaseListObservable<any[]>; 

    constructor() {//af: AngularFire) { 

    setTimeout(() => { 
     this.items.next([{bah: 1},{bah: 2},{bah: 3},{bah: 4}]); 
    },3000); 

    /*this.items = af.database.list('/items'); 
    this.items.push(1); 
    setTimeout(() => { 
     this.items.push(2); 
    },3000);*/ 
    } 
} 

@Component({ 
    selector: 'test', 
    template: '{{JSON.stringify(options)}}' 
}) 
export class TestComponent { 
    public JSON = JSON; 
    @Input() options; 

    ngOnChanges(changes) { console.log('ngOnChanges'); } 
    ngOnDestroy() { console.log('ngOnDestroy'); } 
    ngOnInit() { console.log('ngOnInit'); } 
} 

Answer 1

Вы можете использовать trackBy:

template: '<p *ngFor="let item of items | async; trackBy: itemToIndex" class="my-animation"><test [options]="item"></test></p>' 

Track на должно быть функцией, так что ваш plnkr пример должен быть обновлен до:

itemToIndex(item: any){ 
    return item.index; 
    }