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'实际上是指observable。试试这个来解决它：

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

使用箭头表示法允许'this'上下文保留在类中而不是可观察的。

更多信息 Arrow Notation

属性分配在Angular服务中不起作用

更新

1 个答案: