从 angular2 调用 rest api 导致未定义答案

【问题标题】：Calling rest api from angular2 results in undefined从 angular2 调用 rest api 导致未定义
【发布时间】：2017-01-29 20:25:55
【问题描述】：

我正在努力弄清楚，我的代码有什么问题。我试图从我的角度代码中调用休息 api，但它导致“无法读取未定义的属性 'id'”。

我在组件中的代码如下所示：

ngOnInit(): void{
    this.getWod();
  }

  getWod(): void {
    let id;
    this.route.params.forEach((params: Params) => {
      id = +params['id'];
    })
    this.wodService.getWod(id).then(wod => this.wod = wod);
    console.log(this.wod);
  }

在控制台和后端，我可以看到后端被正确调用。控制台中的网络选项卡显示：

wod: {id: 16, name: "test name", description: "test description", wod_type_id: 3, wod_category_id: 3}

在我刚刚拥有的组件的相应 html 页面中：

<div>{{wod.id}}</div>

上面的console.log方法导致“未定义”，我根本不知道为什么？

更新：

我的 getWod 服务代码如下所示：

  getWod(id: number): Promise<Wod>{
    const url = `${this.getWodUrl}/${id}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json().wod as Wod)
      .catch(this.handleError);
  }

有什么想法吗？

【问题讨论】：

您忘记向我们展示您在组件中声明 wod 的部分。问题可能就在那里。

标签： angular typescript

【解决方案1】：

尝试将div> 更改为

<div>{{wod?.id}}</div> <!--? will stop the reference to id if wod is undefined-->

或者只是在组件中初始化您的this.wod 属性。

话虽如此，我相信您在问题中显示的 console.log 不是从该行生成的，因为 getWod 函数是异步的。

将组件的 getWod() 函数更改为

getWod(): void {
    let id;
    this.route.params.forEach((params: Params) => {
      id = +params['id'];
    })
    this.wodService.getWod(id).then(function(data){
        this.wod = data;
    }); 
  }

假设您的服务编写正确，您应该会看到有效的响应。

【讨论】：

你是对的，我得到一个“未定义”错误
{{wod.id}}
和
{{wod?.id}}
。我尝试将 getWod() 函数更改为上述函数，但收到编译错误：“Promise' 类型上不存在属性 'subscribe'。）”。我使用 getWod 服务中的代码更新了原始问题。
@Tony 我假设您使用的是 observable，我已根据您的服务代码更新了我的答案，请立即尝试！
谢谢你，阿里，这很好用。也许我应该使用 observables。我刚刚开始使用官方教程（英雄之旅）和 angular2 书来使用 Angular2。我想我会在某个时候得到可观察的 ;)

【解决方案2】：

好吧，在您请求 api 时（这需要一些时间），您的模板已经渲染（或渲染..）如果您声明您的属性 wod 而不创建对象，则它是 undefined 在这次。

避免这种情况的两个简单选项可以直接在您的模板中，例如：

<div *ngIf="wod && wod.id">{{wod.id}}</div> （或者在另一个答案中看到elvis 运算符：<div>{{wod?.id}}</div> 这将导致空的div 而不是不存在）

或者你用那个类型的对象预设它（正确的方法是使用interface，或者甚至创建一个特定模型的新对象class，在这一点上我只是展示一个简单的例子） .

wod: any = { id: '' }

【讨论】：