Question

我有服务。在构造函数中：

export class Service {

  _data: any

  constructor(private http: Http) {
    this.http
      .get('../assets/my_json_file.json')
      .map(x => x.json() )
      .subscribe( (data) => 
        this._data = data
      )
    console.log(this._data)
  }

console.log会返回undefined，但如果将console.log移入传递给subscribe的函数中，getStuff()会显示数据。

我的目标是在服务中添加一些功能ngOnInit，可以通过df <- structure(list(VariableA = 58:63, VariableB = c(115L, 117L, 120L, 123L, 126L, 129L)), .Names = c("VariableA", "VariableB" ), row.names = c(NA, 6L), class = "data.frame") df VariableA VariableB 1 58 115 2 59 117 3 60 120 4 61 123 5 62 126 6 63 129 fit <- lm(VariableA ~ VariableB, data = df) summary(fit) Call: lm(formula = VariableA ~ VariableB, data = df) Residuals: 1 2 3 4 5 6 -0.17442 0.12791 0.08140 0.03488 -0.01163 -0.05814 Coefficients: Estimate Std. Error t value Pr(>|t|) (Intercept) 18.05814 1.22618 14.73 0.000124 *** VariableB 0.34884 0.01007 34.64 4.14e-06 *** --- Signif. codes: 0 ‘***’ 0.001 ‘**’ 0.01 ‘*’ 0.05 ‘.’ 0.1 ‘ ’ 1 Residual standard error: 0.1206 on 4 degrees of freedom Multiple R-squared: 0.9967, Adjusted R-squared: 0.9958 F-statistic: 1200 on 1 and 4 DF, p-value: 4.144e-06 print(fit) Call: lm(formula = VariableA ~ VariableB, data = df) Coefficients: (Intercept) VariableB 18.0581 0.3488 coefficients(fit) (Intercept) VariableB 18.0581395 0.3488372上的应用调用，其中包含下拉菜单和内容的值

看到this，但没有帮助弄清楚出了什么问题

Answer 1

this.http.get('../assets/my_json_file.json')是异步的，这意味着调度服务器的时间安排在以后执行，当服务器的响应最终到达时，将通过响应调用传递给.subscribe(...)的回调。 “已调度”表示任务将添加到事件队列中，以便在以前计划的任务完成时执行。

安排http.get(...)来电后，console.log(this._data)将被执行。这是在甚至启动对服务器的调用之前。

http.get(...)调用也仅在订阅http.get(...)返回的observable时调度，因为observable是懒惰的。

使用map(...)代替subscribe(...)会返回Observable而不是Subscription，这样您的服务用户就可以将自己的代码链接到响应事件。

@Injectable()
export class Service {

  _data: any

  constructor(private http: Http) {}

  getData() {
    this.http
      .get('../assets/my_json_file.json')
      .map(x => x.json() )
      .map( (data) => 
        this._data = data
      )
    console.log(this._data)
  }
}

在组件中，您可以像

一样使用它

export class MyComponent {
  constructor(service:Service) {
    // `subscribe` actually initiates the call to the server
    service.getData().subscribe(result => console.log(result));
  }
}

另见What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

这样，您可以在实例化服务时启动对服务器的调用，而不仅仅是在使用该服务的组件订阅之后。

从Angular 2中的Service使用Json文件

1 个答案: