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

您遇到的问题是因为您的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();
        }
    }

Angular在构造函数外部的函数中返回undefined

1 个答案: