Question

我有一个自定义类数组的属性。该阵列填充了对服务的调用，该服务调用Web服务以获取数据。我订阅了observable，并且我使用complete事件来启动加载图形的方法。

图表使用的数据应来自订阅期间填充的数组，但是当我尝试在方法中执行此操作时，我的组件属性上出现了未定义的错误。为什么会这样，我认为组件属性应该可以被同一类中的方法访问。

export class MetricsComponent implements OnInit{
errorMessage: string;
metric: MetricData[] = [];

//constructor is used for dependency injection
constructor(public _metricsService: MetricsService){}

ngOnInit(): void {
    console.log('talking to service...');
    this._metricsService.getData()
        .subscribe(
            data => this.metric = data,
            error => this.errorMessage = <any>error,
            this.LoadChart
        );  
}

LoadChart(): void {
    console.log(this.metric);  // <== this returns as undefined
}

Answer 1

使用箭头功能保留this.

的范围

ngOnInit(): void {
    console.log('talking to service...');
    this._metricsService.getData()
        .subscribe(
            data => this.metric = data,
            error => this.errorMessage = <any>error,
            () => this.LoadChart()
        );  
}

Answer 2

这样做是为了更多信息阅读lexical this和arrow functions如果您使用的是Chrome开发人员工具，它还会显示null，Chrome开发人员工具存在一些错误。

LoadChart = () => void {
    console.log(this.metric);  //
}

Angular 2 - 方法中未定义的Component属性

2 个答案: