javascript - 在 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
}
解决方案
我更喜欢使用拆卸方法.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(...)
推荐阅读
- r - 如何在 R Shiny 中打印变量的摘要?
- postgresql - 在 Postgresql 中显示某些表的约束
- python - 额外数据:第 2 行第 1 列 - 第 341211 行 - json.load 中的错误
- c# - C# 生成计算机独有的字符串
- c - C 中的 POSIX 信号量,用于 2 个单独的程序(消费者/生产者)
- c# - C# - 从数据库中检索数据并将其分配给变量
- sdk - 如何将 WorkItemsAffected 保存到风险中
- oracle - 使用触发器引发错误:ORA-20987: APEX - ORA-01858 ORA-06512
- reactjs - AWS Rekognition 图像编码问题
- json - 我突然得到的这个“意外的令牌/在 JSON 中的位置 772”是什么?(角2)