我正在尝试使用 angular 创建触发器,但是当我从我的 api 获得响应时,它会返回 undefined
。
这是我的 global-search.ts
文件:
export class GlobalSearchComponent{
searchable: String = '';
professionals: any = {};
constructor(public client: Http){
}
getProfessionals() {
return this.client.get('professionals')
.subscribe(data => this.professionals = data.json());
}
doSearch(ev: any) {
let val = ev.target.value;
if(val.length > 3) {
this.getProfessionals();
console.log(this.professionals);
}
}
如果在 getProfessionals()
方法中我这样做:
return this.client.get('professionals'
.subscribe(data => console.log(data.json()));
它返回一个对象(它是正确的),但在 doSearch()
方法中,它向我显示 undefined
。
我做错了什么?
最佳答案
您遇到的问题是因为您的 console.log 语句所在的位置。
Observable/.subscribe 是异步的,因此它将允许您的其余代码在等待数据从您的服务返回时继续执行,然后在完成时更新 this.professionals 变量。
在您的原始代码中,您从 doSearch 调用 getProfessionals 函数,而 .subscribe 仍在执行(并且 this.professionals 变量仍未定义),代码继续并注销该值(未定义),并且然后数据返回并将变量设置为正确的值,但此时控制台已经注销了之前的状态。
如果在收到响应后将 console.log 语句移动到 .subscribe block 中,您会发现它记录了您期望的实际值,因为 console.log 直到响应被执行才会执行收到并将值分配给您的变量。
export class GlobalSearchComponent{
searchable: String = '';
professionals: any = {};
constructor(public client: Http){
}
getProfessionals() {
return this.client.get('professionals')
.subscribe(data =>
{
this.professionals = data.json();
console.log(this.professionals);
})
}
doSearch(ev: any) {
let val = ev.target.value;
if(val.length > 3) {
this.getProfessionals();
}
}
关于javascript - Angular 在构造函数外部的函数中返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45427524/