javascript - trackBy 与异步管道

Question

我正在尝试将 async 管道与 *ngFor 一起使用，以显示异步获取的项目数组。

<ul>
  <li *ngFor="let item of items | async; trackBy: trackPost">
    {{item.text}}
  </li>
</ul>

ngOnInit() {
  // very simple http call; returns an array of [{id: 1, text: "something"}]
  this.items = this.itemService.loadItems();
}
trackPost(index, item) { return item.id; }

这很好用。然后我想添加一个项目:

async addItem(text) {
  await this.itemService.addItem({text});
  // reload items after adding
  this.items = this.itemService.loadItems();
}

这也有效，它会在添加后正确更新项目。

问题是它将重新加载整个数组，而不是仅仅附加项目。您可以通过动画注意到这一点(如果您为其中的项目设置动画)。我知道我可以自己处理订阅并使用数组，但我想知道是否有办法使用异步管道执行此操作。

有没有办法将新项目添加到现有的可观察对象中？如果做不到这一点，是否有办法让模板正确跟踪项目而不是将它们视为重新添加？

Answer 1

问题是您通过 this.items = this.itemService.loadItems(); 重新分配了流。因此，您的 Observable items 不会发出新值，Angular 会使用您的 trackBy 函数跟踪这些值，而不是您更改 items 的引用，从而导致 angular 进行完全重新加载.

因此只需更改服务的 addItem 函数，通过 loadItems 将更新后的值发送到您之前获得的 Observable。之后你只需调用

addItem(text) {
  this.itemService.addItem({text});
}

---

服务示例:

@Injectable()
export class Service {
    private items: Array<string> = [];
    private items$ = new Subject<Array<string>>();

    loadItems(): Observable<Array<string>>  {
        return this.items$.asObservable();
    }

    addItem(text: string) {
        this.items = [...this.items, text];
        this.items$.next(this.items);
    }
}