javascript - Angular 在构造函数外部的函数中返回未定义

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 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();
        }
    }