Angular 可观测角度

嗨，我是Angular 6的新手，在做了几次研究之后，我都没法让事情顺利进行。 我有一个来自jsonplaceholder.typecode.com的列表，当我阅读它的文档时，我可以发布、删除和更新，但如何在执行这些方法时使列表异步更改

这是我的服务方法

getContacts(){
return this.contact = 
 this.http.get('https://jsonplaceholder.typicode.com/users');
}

getUser(id){
 return this.http.get('https://jsonplaceholder.typicode.com/users/'+id);
}

addContact(newContact: Contact){
 return this.http.post('https://jsonplaceholder.typicode.com/users', 
newContact);
 }

 removeContact(contact){
  return 
 this.http.delete('https://jsonplaceholder.typicode.com/users/'+contact.id);
}

updateContact(contac: Contact){
return 
this.http.put('https://jsonplaceholder.typicode.com/users/'+contac.id, 
 contac);
 } 

---

如果我理解你的问题是正确的。是否要在更新请求成功后触发get

组件：

updateContact(){
  this.service.updateContact().pipe(
    map(status=> {
      return this.service.getContacts();
    })
  ).subscribe(response=>{
    console.log(response);
  })
}

---

首先在您的服务中创建一个

行为主题

：

contacts$ = new BehaviorSubject([]);

这将创建一个代理（Observable+Observer），您可以订阅和收听该代理

现在我们有了它，让我们填充它：

getContacts() {
  this.http.get(url).subscribe(contacts => this.contacts$.next(contacts));
}

使用此代码，您将获得联系人列表并将其推送到代理中

addContact(newContact: Contact){
  this.contacts$.pipe(
    take(1),
    switchMap(contacts => this.http.post(url, newContact).pipe(
      map(() => [...contacts, newContact])
    )),
  ).subscribe(contacts => this.contacts$.next(contacts));
}

使用此选项，您可以创建一个新联系人并将其附加到现有联系人列表中

通过创建代理，您可以创建一个数据源，您可以处理HTTP调用

例如，在第一种方法中，我发出一个值，该值是联系人数组。每个侦听器（即您编写的

this.myService.contacts$.subscribe

）都将收到此值

在第二个示例中，我开始获取联系人列表并收听单个事件（即未来对

contacts$的呼叫。下一个
不会对该订阅做任何事情）。然后，我请求创建联系人，完成后，我创建一个新的数据源，其中包含以前的联系人以及新联系人，然后发出一个事件

这不是很清楚，学习起来似乎很累，但一旦你能使用它，它就会变得非常强大

现在您已经掌握了基本知识，我将让您处理更新和删除，因为我不是来为您编写代码的

如果您对这段代码有任何问题，那么我建议您阅读文档并制作一些关于RxJS的教程，因为实际上，这非常强大，而且您几乎总是使用Angular。
您的get方法很奇怪，为什么需要返回一个矫揉造作的结果？我的意思是，为什么不简单：
返回这个.http.get…
您想要什么类型的更改？如果我需要从服务器读取响应，并在component.ts上执行一些操作，例如在post到newContact后从db添加id，如何？我通常返回
Promise
来做那件事。@sulaimantiarjo你应该使用可观察的，将响应变成承诺就是降级。这并没有改变它背后的逻辑。