javascript - Angular 6 - 修改添加方法以更新视图

Question

我正在更改显示在 app.component.html 上的数据列表

<ul>
<li *ngFor="let data of DataSource"> 
        {{ data.id }} - {{data.title}} 
</li>
</ul>

我设法像这样推送一个新的数据行：

  create() {
    const newPostId = this.postId + 1;
    this.apiService.create(newPostId, this.postTitle, this.postText).subscribe(result => {
      const newId = result['id'];
      this.retrieveData.push({id: newId, title: this.postTitle});
      this.dataCount = this.dataCount + 1;
    }, error => console.log('There was an error: ', error));
  }

这工作正常，并在数据列表的末尾添加了一个新行。

我的问题是：

如何修改我的 create() 方法以更新当前并在 app.component.html 上显示更改？

Answer 1

假设您想要的是在数组中找到其 id 与您正在更新的项匹配的项并将其替换为新项，您可以执行以下操作：

this.apiService.update(...).subscribe(result => {
  const newId: number = result['id'];
  const currentItemIndex = this.retrieveData.findIndex((item: {id: number}) => item.id === newId);
  if (currentItemIndex > -1) {
      // replace the current item with the new one
      this.retrieveData.splice(currentItemIndex, 1, {id: newId, title: this.postTitle});
  } else {
     // TODO: if it wasnt there to being with, is this an error?
  }
}, error => console.log('There was an error: ', error))