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([]);

这将创建一个您可以订阅和收听的代理（可观察+观察者）。

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

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一起使用。

Answer 2

如果我正确理解您的问题。您要在更新请求成功后触发获取？

组件：

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

Angular 6更新可观察

2 个答案: