Angular 6 更新 Observable

Question

您好，我是 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);
 } 

Answer 1

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

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$.next 不会对此订阅执行任何操作)。然后，我请求创建联系人，完成后，我创建一个包含以前的联系人和新联系人的新数据源，然后发出一个事件。

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

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

如果你对这段代码有任何问题，那么我建议你阅读文档并制作一些关于 RxJS 的教程，因为真的，它非常强大，你几乎总是将它与 Angular 一起使用。