在角9的回调中指定可观察的

Question

我完全是个新手。现在我被困在这里了，有些人为了让初始代码正常工作而挣扎。

用例:显示加载栏。把商人名单拿来给一个可观察的人。停止装货杆。

问题：

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.ts

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

Answer 1

我更喜欢使用teardown方法.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方法的响应。注意不要在流上调用订阅，因为它将返回订阅而不是可观察到的订阅：

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