Лучший способ справиться с вложенной подпиской

Question

У меня есть код ниже

this.subscriptions.push(this.loginservice.userdetails$.valueChanges().subscribe(data => {  // subscribing for user data... if any of the logged in user details changed
  this.lgUser = data;
  this.toFilter.subscribe(filter => {   // subject filter value of a dropdown
    this.subscriptions.push(this.service.getlist(this.lgUser.oid, filter).subscribe(res => { // subscribing to get list data
     // do some operation on res
    }));
    this.subscriptions.push(this.service.countValue(this.lgUser.oid, filter).subscribe(res => { // subscribing to get count value
      this.lCount = res.length;
    }));

  })
}));

Как сделать его более заметным образом

Спасибо

Answer 1

Ну, я думаю, что это чисто:

this.loginservice.userdetails$
  .valueChanges()
  .pipe(
    tap(data => this.lgUser = data),
    switchMap(data => this.toFilter.pipe(
      tap(filter => this.service.countValue(this.lgUser.oid, filter)
        .pipe(take(1))
        .subscribe(res => this.lCount = res.length)
    )),
    switchMap(filter => this.service.getlist(this.lgUser.oid, filter))
  ).subscribe(res => {
    // Do something on res
  });

• Вы начинаете с прослушивания изменений на вашем входе.
• При каждом изменении вы обновляете this.lgUser содержимым ввода.
• Затем вы переключаетесь на toFilter и отменяете предыдущие ожидающие запросы с помощью switchMap
• . Вы один раз звоните countValue, чтобы получить данные и сохранить их в lCount
• Затем вы переключаетесь на service.getList и отменяете предыдущие незавершенные запросы
• . У вас остается одна sbuscription, где вы можете делать то, что хотите.