将Angular的Observable转换为数组

Question

以下内容不会在控制台输出数组。作用域错误吗？

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Broker } from './broker';

@Injectable()
export class BrokerSurveyService {

  brokers: Broker[] = [];

  constructor(private http: HttpClient) { 
    this.getBrokers().subscribe((brokers) => { 
      this.brokers = brokers;
    });
    console.log(this.brokers); # Does NOT output to console
  }

  getBrokers() {
    return this.http.get<Broker[]>('http://www.example.com/brokers.json');
  }

}

这个数组被输出到控制台是因为它在赋值后立即发送到控制台。但是，this的作用域是否不同？我很困惑为什么会这样。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Broker } from './broker';

@Injectable()
export class BrokerSurveyService {

  brokers: Broker[] = [];

  constructor(private http: HttpClient) { 
    this.getBrokers().subscribe((brokers) => { 
      this.brokers = brokers;
      console.log(this.brokers); # Outputs to console
    });
  }

  getBrokers() {
    return this.http.get<Broker[]>('http://www.example.com/brokers.json');
  }

}

- Michael Niño

Answer 1

这是正确的，

由于服务调用是异步的，当调用subscribe方法时，数据不会立即到达。而是在从服务返回响应时，定义为subscribe方法参数的回调函数将被调用。

这就是为什么Subscribe中的console.log能够工作的原因。

如果你想在代码中的其他地方使用该数组，请调用另一个方法。

constructor(private http: HttpClient) { 
    this.getBrokers().subscribe((brokers) => { 
      this.brokers = brokers;
      useBroker(this.brokers);
    });
 }

useBroker(brokers:any){
   console.log(brokers);
}

- Sajeetharan