Назначьте наблюдаемое в обратном вызове в Angular 9

Question

Я совершенно новичок от ie до Angular. Как-то изо всех сил пытаясь заставить начальный код работать, я застрял здесь.
Пример использования: Показать панель загрузки. Получить список торговцев наблюдаемому. Остановить загрузку панели.

Проблема:

fetchUsers($event) {
    let searchTerm = $event.term;
    if (searchTerm.length > 3) {
      this.isLoading=true;
      this.people$ = null;
      this.userService.getMerchantsBySearch(searchTerm);
  --> this.isLoading=false;
   }
}

this.isLoading становится ложным даже до получения ответа от вызова getMerchantsBySearch. Я знаю, что мне нужно будет выполнить этот шаг в обратном вызове, но я не знаю, как это сделать.

Я хочу сделать что-то подобное, но мне чего-то не хватает. Как это сделать правильно?

fetchUsers($event) {
    let searchTerm = $event.term;
    if (searchTerm.length > 3) {
      this.isLoading=true;
      this.people$ = null;
      this.userService.getMerchantsBySearch(searchTerm).subscribe(
        res={
    --->  this.people$ =res;
    --->  this.isLoading=false;
        }
      );
    }
  }

dashboard.component.ts

people$: Observable<IMerchant[]>;

fetchUsers($event) {
    let searchTerm = $event.term;
    if (searchTerm.length > 3) {
      this.isLoading=true;
      this.people$ = null;
      this.userService.getMerchantsBySearch(searchTerm);
      this.isLoading=false;
    }
}

user.service.ts

getMerchantProfile(id){
    var options = this.getOptions();
    return this.http.get<IMerchant[]>(environment.APIBaseURL+"/getMerchantProfile/"+id,options);
}

merchant.model. тс

export interface IMerchant{
    email:String,
    mobile : String,
    password: String,
    businessName : String,
    otp:Number,
    info:string,
    url:String
}

Answer 1

Я предпочитаю использовать метод разборки .add(). он не загрязняет вашу цепочку обработки данных, а также выполняется после обработки ошибки:

this.userService.getMerchantsBySearch(searchTerm)
    .pipe(
        // manipulate data here
    )
    .subscribe(
        res => {
            // handle final data
        },
        error => {
            // handle error
        }
    ).add(() => {
        // teardown here (e.g. this.isLoading=false;)
    });

Кстати: если this.people$ является наблюдаемым, вы не можете назначить его внутри подписки. Перезвони. вам нужно будет назначить его ответу используемого вами метода userService. Будьте осторожны, чтобы не вызывать subscribe в потоке, поскольку он вернет вам подписку вместо наблюдаемого:

this.people$ = this.userService.getMerchantsBySearch(searchTerm).pipe(...)

Answer 2

Фактически вы можете pipe и добавить finalize

this.userService.getMerchantsBySearch(searchTerm)
.pipe(finalize(() => this.isLoading=false))
.subscribe(
    res => {
         this.people$ =res;
    });