Question

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

2017-08-01

1868

javascript angular typescript

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

您遇到的问题是由于您的 console.log 语句的位置所致。

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

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

如果在收到响应后将 console.log 语句移到 .subscribe 块中，您会发现它注销了您期望的实际值，因为在收到响应并将值分配给您的 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();
        }
    }