首页 > 解决方案 > 在 Angular 9 的回调中分配 observable

问题描述

我完全是 Angular 的新手。现在我被困在这里,有些如何努力让初始代码正常工作。
用例:显示加载栏。将商家列表获取到 observable。停止加载栏。

问题:

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
}

标签: javascriptangularobservable

解决方案


我更喜欢使用拆卸方法.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 ,因为它会返回一个订阅而不是 observable:

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

推荐阅读