Attempting to utilize the async pipe along with *ngFor to exhibit an array of items obtained asynchronously.
<ul>
<li *ngFor="let item of items | async; trackBy: trackPost">
{{item.text}}
</li>
</ul>
ngOnInit() {
// a simple http call that fetches an array of [{id: 1, text: "something"}]
this.items = this.itemService.loadItems();
}
trackPost(index, item) { return item.id; }
The process works smoothly. However, when I attempt to include an additional item:
async addItem(text) {
await this.itemService.addItem({text});
// reload items after adding
this.items = this.itemService.loadItems();
}
This method is effective and updates the items correctly post addition.
The dilemma arises as it refreshes the entire array instead of just appending items. This becomes evident through animations (if there are any). While I understand that managing the subscription manually and working with arrays can solve this issue, I am curious if there's a way to address this using the async pipe.
Is there a means for me to add the new item onto the existing observable? If not, is there a way to ensure the template accurately tracks the items instead of treating them as newly added?