在 Angular 9 的回调中分配 observable

Question

我完全是 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 调用获得响应之前就变为 false。 我知道我需要在回调中执行此步骤，但我不确定如何执行。

我想做这样的事情，但我错过了一些东西。 什么是正确的方法。

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;
        }
      );
    }
  }

仪表板.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;
    }
}

用户服务.ts

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

商人.model.ts

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

Answer 1

我更喜欢使用拆卸方法.add() 。 它不会污染您的 pipe 数据操作链，并且在处理错误后也会执行：

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 方法的响应。 注意不要在 stream 上调用 subscribe ，因为它会返回一个订阅而不是 observable：

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;
    });