Wie kann ich nur einen Teil einer Liste aktualisieren?

Question

Kontext:

• Objekte in einer Liste
• Liste durch eine andere Liste mit den gleichen Posten ersetzt plus/minus ein Objekt

Problem: Jedes einzelne Element in meiner Liste zerstört und neu erstellt obwohl die Eingabe gleich ist

Der Grund, warum die Liste durch eine andere Liste ersetzt wird, liegt daran, dass eine Observable dahinter steht (angularfire2). Wie kann ich das Nachladen der gesamten Liste vermeiden? Gibt es eine Möglichkeit, für jedes Element in dieser Liste separate Observable zu erstellen und diese stattdessen auf Änderungen aufmerksam zu machen?

Unsicher, ob dies mit angularfire2 getaggt werden soll, da ich das gleiche Problem in angular2 erstellen kann. Verlassen einige angularfire2 in den Kommentaren

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

Sie trackBy verwenden können:

von

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

Spur sollte eine Funktion sein, so dass Ihr plnkr Beispiel sollte aktualisiert werden:

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