属性分配在 Angular 服务中不起作用 [重复]

Question

我在 TypeScript 中为 Angular 4 提供了一个非常简单的可注入服务。它从网络获取 JSON 文件作为数组。之后，它应该将返回的数组存储在其属性之一中，称为data。然后data 可以被其他类使用getData() 方法访问。

我的问题是赋值操作被忽略了。执行this.data = data 实际上并没有改变this.data。其他一切都运行良好。

服务代码：

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

@Injectable()
export class JsonFetcherService {
  private data: any;

  constructor(private http: HttpClient) {
    this.data = null;
  }

  public fetch(url: string): void {
    this.http.get(url).subscribe(this.setData);
  }

  private setData(data) {
    this.data = data;
  }

  public getData(): any {
    return this.data;
  }
}

使用服务的一个非常简单的类的代码：

import { Component } from '@angular/core';

import { JsonFetcherService } from '../jsonFetcherService/JsonFetcherService';

@Component({
    selector: 'json-fetcher-example',
    templateUrl: './JsonFetcherExample.html'
})
export class JsonFetcherExample {
    constructor(private json: JsonFetcherService) {
        this.json.fetch('http://mysafeinfo.com/api/data?list=englishmonarchs&format=json');
    }
}

更新：

除了this的绑定问题外，这里使用的方法subscribe是异步的。获取 JSON 文件后要执行的代码需要移到回调中。

public fetch(url: string, myFunction) {
  const test = this.http.get(url);
  test.subscribe((data)=> {
    this.data = data;
    myFunction();
  });
}

Answer 1

这里的这个问题是“this.data”的“this”的上下文。在 this.setData() 函数内部，“this”实际上是指可观察对象。试试这个来解决它：

let setData = (data)=> {
  this.data = data;
}

使用箭头表示法允许“this”上下文保留在类中，而不是 observable。

更多信息 Arrow Notation