javascript - Angular 6 - 从 app.component.html 中删除数据并更新 View 中的更改

Question

我有一项服务正在获取数据列表并将其显示在 app.component.html 上

这是显示数据的代码:

<ul>
    <li *ngFor="let data of retrieveData"> 
        {{ data.id }} - {{data.title}} <span><button (click)="delete(data.id)">Delete Record</button></span>
    </li>
</ul>

如您所见，我为每行数据添加了一个删除按钮，然后调用一个方法从服务器中删除数据。

这有效，但同时我需要从 View 中删除这些数据，而无需重新加载页面

在 app.component.ts 上我有这个方法，然后调用服务方法:

delete() {
    this.apiService.delete(1).subscribe(result => {
      console.log(result);
    }, error => console.log('There was an error: ', error));
}

如何在不重新加载页面的情况下更新组件数据？

Answer 1

更新显示的集合以删除已删除的元素。

delete(id) {
    this.apiService.delete(id).subscribe(result => {
      console.log(result);
      this.retrieveData = this.retrieveData.filter((elem) => {
          return elem.id !== id;
      });
    }, error => console.log('There was an error: ', error));
}