Порядок асинхронных HTTP-запросов

Question

В основном у меня есть компонент со списком элементов, и у меня есть компонент детали, где вы можете редактировать или добавлять новый элемент.

После добавления элемента через службу http (этот.myservice основан на hero.service.ts из документации https://angular.io/docs/ts/latest/tutorial/toh-pt6.html) на мой сервер. Затем я сразу возвращаюсь к списку элементов.

Я использую Zone, так что вызывается ngOnInit. Angular 2 ngOnInit not called

Проблема в том, что довольно часто список элементов не обновляется новым элементом. Я полагаю, что порядок асинхронных HTTP-запросов путается.

Как выглядит хорошее решение?

export class DetailElemComp { 
    this.myService.addElem(this.elem) 
     .subscribe(
     error => this.errorMessage = <any>error); 
    this.zone.run(() => this.router.navigate(['ListComponent'])); 
} 
export class ListOfElemComp { 
    ngOnInit() { 
     this.myService.getElems() 
      .subscribe(
      elems => this.elems = elems, 
      error => this.errorMessage = <any>error); 
    } 
} 

Answer 1

Ну, как вы уже сказали, это асинхронный запрос. Так что если вы хотите сделать что-то после того, как запрос закончил, я предлагаю двигаться эту логику в onCompleted обратного вызова лямбда-функции subscribe как так:

export class DetailElemComp { 
    this.myService.addElem(this.elem) 
     .subscribe(
     data => null, 
     error => this.errorMessage = <any>error, 
     () => this.zone.run(() => this.router.navigate(['ListComponent'])) 
    ); 
} 

код ниже этого subscribe вызов будет иначе работать до обратных вызовов внутри subscribe способ делаю.