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);
}
想法?
答案 0 :(得分:0)
那么你正在请求你的api(这需要一些时间)你的模板已经渲染(或渲染..)如果你声明你的属性wod
而没有创建一个对象它是{{ 1}}此时。
要避免这种情况的两个简单选项可以直接在您的模板中,例如:
undefined
(或在<div *ngIf="wod && wod.id">{{wod.id}}</div>
运算符的另一个答案中看到:elvis
会导致空<div>{{wod?.id}}</div>
而不是不存在的1}
或者您使用该类型的对象预设它(正确的方法是使用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
假设您的服务写得正确,您应该看到有效的回复。