在构造函数外部的函数中未定义的角度返回

Question

我正在尝试使用 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.

我做错了什么？

Answer 1

您遇到的问题是因为您的控制台.log语句所在的位置。

Observable/.subscribe 是异步的，因此它将允许其余代码在等待数据从服务返回时继续执行，然后在完成后更新 this.professionals 变量。

在原始代码中，您从 doSearch 调用 getProfessionals 函数，当 .subscribe 仍在实现时(并且 this.professionals 变量仍未定义(，代码继续并记录该值(未定义(，然后数据返回并且变量设置为正确的值，但此时控制台已经注销了以前的状态。

如果在收到响应后将 console.log 语句移动到 .subscription 块中，您会发现它会记录出您期望的实际值，因为控制台.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();
}
}