Angular2 http observables-如何使用未定义的类型

Question

我正在将一些代码从Angular1迁移到Angular2，但有一些问题。我可以打开json响应，填充模板，并从模板ng函数访问数据，但无法直接从组件类访问数据。从我读到的和看到的错误消息来看，Angular2 http/observable似乎没有返回纯json对象，因此我怀疑我需要重新映射它，但不确定如何映射。我相信，使用onPromise也可以回到promise上来，但还没有成功实现。我花了很多时间在谷歌上搜索解决方案，并尝试实现其中的大部分，但运气不佳。如果有人能就如何将响应重新映射为可用格式或直接访问响应中的数据提供建议，将不胜感激。

来自服务的http调用示例：-

getExam() {
    return this._http.get('/json/exam.json')
      .map(data => data.json());
  }

订阅示例：-

  ngOnInit() {
      this._examsService.getExam()
        .subscribe(response => this.exam = response);
    console.log(this.exam.length);  //this fails
  }

控制台日志错误示例：-

TypeError: Cannot read property 'length' of undefined in [null]

示例数据结构（非常简化的测试）：-

{"title":"My Practice Exam",
  "questions":[
    {"question":"1+1 = ",
      "answers":[
        {"answer":"2","correct":"Y","selected":"N","iscorrect":""},
        {"answer":"5","correct":"N","selected":"N","iscorrect":""}]},
    {"question":"2+2 = ",
      "answers":[
        {"answer":"4","correct":"Y","selected":"N","iscorrect":""},
        {"answer":"7","correct":"N","selected":"N","iscorrect":""}]},
    {"question":"3+3 = ",
      "answers":[
        {"answer":"6","correct":"Y","selected":"N","iscorrect":""},
        {"answer":"8","correct":"N","selected":"N","iscorrect":""}]}]}

在Angular1中，我能够直接从函数中访问数据-例如，如下所示，并希望在Angular2中做类似的操作

if ($scope.myExams[0].questions[q].answers[a].correct == 'y') ...

Answer 1

我认为以下情况是正常行为：

ngOnInit() {
  this._examsService.getExam()
    .subscribe(response => this.exam = response);
  console.log(this.exam.length);  //this fails
}

因为您尝试访问稍后设置的考试对象上的长度属性以及响应何时出现（在订阅方法中）。

也就是说，当在可观察对象中抛出错误时，不会调用map运算符。如果要转换错误响应，可以利用catch运算符，如下所述：

this._examsService.getExam()
    .subscribe(
      // Success
      response => this.exam = response,
      // Failure
      response => {
        // Do something
      });

以及相应的服务代码：

getExam() {
  return this.http.get('http://...')
           .map(res = > res.json())
           .catch(res => {
             // If you want to extract the JSON error
             // message from the response
             return Observable.throw(res.json());
           });
}

否则，您也可以利用async管道直接设置组件上的可观察对象，而不执行订阅：

this.exam = this._examsService.getExam();

并在相关模板中

<ul>
  <li *ngFor="#e of exam | async">{{e.name}}</li>
</ul>

希望对你有帮助蒂埃里

Answer 2

使用此代码

ngOnInit() {
  this._examsService.getExam()
    .subscribe(response => this.exam = response);
  console.log(this.exam.length);  //this fails
}

第一行发送请求this_ExamService。getExam（）。订阅（…）并在响应中注册兴趣，然后控制台。log（this.exam.length）被执行，但此时响应=

您需要保持在事件链中，才能处理最终返回的数据，如：

ngOnInit() {
  this._examsService.getExam()
    .subscribe(response => {
      this.exam = response;
      console.log(this.exam.length);  //this shoudn't fail anymore
    });
}

我不知道这是否解决了你的问题，但你的问题没有提供足够的信息，说明你需要更详细的解决方案。