Как правильно сделать subscribe внутри другого subscribe?

Question

[Алексей Мирошниченко]

addPost() {
    this.openDialog().subscribe(formData => {
      if (formData) {
        this.postsService.add(formData).subscribe((res: Post) => {
          this.posts.unshift(res);
        });
      }
    });
  }

Answer 1

[Даша Циклаури]

не надо так делать, используй flatMap

this
  .openDialog()
  .flatMap(fd=>{
     return !fd?Observable.Empty():this.postsService.add(fd).first();
  })
  .subscribe(post=>{
    this.posts.unshift(post);
  });

Comments

[msdosx86]

Во-первых, flatMap уже deprecated и вместо него в 90% случаев сойдёт switchMap.
Во-вторых, ushift это очень дорогостоющая операция и ее лучше не использовать.
Втретьих, явно вызвать subscribe ради того, чтобы обновить массив posts тоже не хорошо.

В идеале данные надо выводить сразу в шаблоне через async pipe и кэшировать посты с помощью оператора scan (как раз таки с помощью scan можно будет просто написать return [ curr, ...acc ] вместо использования unshift'a). Ну и чтобы при каждом изменении ангуляр не рендерил весь твой список постов каждый раз снова и снова, используй trackBy по id поста. Так ангуляр будет рендерить только то, что изменилось.

Answer 2

[kimisu]

можно вот так

async addPost() {
   const formData = await this.openDialog().toPromise();
   if (formData) {
    const res = await this.postsService.add(formData).toPromise();
     this.posts.unshift(res);
   }
  }