Question

Iam努力想弄清楚，我的代码有什么问题。我试图从我的角度代码中调用一个rest 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);
  }

想法？

Answer 1

那么你正在请求你的api（这需要一些时间）你的模板已经渲染（或渲染..）如果你声明你的属性wod而没有创建一个对象它是{{ 1}}此时。

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

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

或者您使用该类型的对象预设它（正确的方法是使用div，或者甚至创建某个模型interface的新对象，此时我只是显示一个简单的例子。）

class

Answer 2

尝试将wod: any = { id: '' }更改为

div>

或者只是初始化组件中的<div>{{wod?.id}}</div> 属性。

说过我相信你在问题中显示的this.wod不是从该行生成的，因为getWod函数是异步的。

将组件的getWod（）函数更改为

console.log

假设您的服务写得正确，您应该看到有效的回复。

从angular2调用rest api导致undefined

2 个答案: