从angular2调用rest api导致undefined

时间:2017-01-28 23:50:48

标签: angular typescript

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);
  }

想法?

2 个答案:

答案 0 :(得分:0)

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

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

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

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

class

答案 1 :(得分:0)

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

div>

或者只是初始化组件中的<div>{{wod?.id}}</div> <!--? will stop the reference to id if wod is undefined--> 属性。

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

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

console.log

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