Question

上下文：

列表中的对象
列表被另一个列表替换为具有相同项目加/减对象

问题：即使输入相同，我的列表中的每个项目都会被销毁并重新创建

列表被另一个列表替换的原因是因为它后面有一个observable（angularfire2）。如何避免整个列表重新加载？有没有办法为该列表中的每个项目创建单独的observable，而是让那些人听取更改？

不确定是否应该使用angularfire2标记，因为我可以在angular2中创建相同的问题。在评论中留下一些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 by应该是一个函数，因此您的plnkr示例应更新为：

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

如何仅更新列表的一部分？

1 个答案: