Angular 6 Обновление Observable - PullRequest
Новая
       5

Angular 6 Обновление Observable

0 голосов
/ 13 ноября 2018

Привет, я новичок в 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);
 }

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Начните с создания 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.

0 голосов
/ 13 ноября 2018

Если я правильно понял ваш вопрос.Вы хотите вызвать get после запроса на обновление uccess?

Компонент: 

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