从http服务器删除后的Angular 4更新视图答案

【问题标题】：Angular 4 update view after deleting from http server从http服务器删除后的Angular 4更新视图
【发布时间】：2018-02-14 15:29:27
【问题描述】：

这可能会被问到，但我正在寻找一种最有效的方法来更新从服务器获取数据的组件中的视图，假设我在其他组件中从服务器中删除了一个项目

服务

   getAllMessages(): Observable<any> {
     return this.http.get('/api/messages/);
       }

   applyTagToMessage(messageId): Observable<any> {
      return this.http.delete('/api/messages/' + messageId)
        }

组件A

   this.messageService.getAllMessages().subscribe(data = > {
      this.messages = data;
       })


   <div *ngFor="let message of messages">{{message.tags}}</div>

组件B

 addTagToMessage(messsageId)

   this.messageService.applyTagToMessage(messageId).subscribe(data = > {
      alert("success added tag to message")
       })
   }


   <button (click)="addTagToMessage(messageId)"></button>

那么当我从服务器删除项目时，如何更新从服务器获取数据的组件A？我应该使用异步管道吗？

【问题讨论】：

您可以创建一个包含数据列表的服务。如果您从删除请求中获得 200 OK，只需将此项从内部列表中分割出来

标签： javascript angular rest http service

【解决方案1】：

每当您更改/重新加载数据时，您都可以在服务中使用 EventEmitter。然后在组件 A 中订阅该事件。

通过您的服务处理组件 B 中项目的删除/添加。

https://angular.io/api/core/EventEmitter

【讨论】：

【解决方案2】：

在我的模板中，我确实使用异步管道，只要我期望数据发生变化。

<div *ngFor="let exp of model$ | async">

其中model$ 被定义为可观察对象：

private model$: Observable<Experiment[]>;

【讨论】：