未定义的角度属性"长度"

Question

>我正在尝试获取打开的路由的详细信息(基于id(，但它返回

错误

类型错误：无法读取未定义的属性"长度">

和

错误类型错误：无法读取未定义的属性"注释">

法典

Service

getGroupsDetails(id) {
const httpOptions = {
headers: new HttpHeaders({
Accept: 'application/json, text/plain',
'Content-Type': 'application/json',
Authorization : this.token,
})
};
return this.http.get(`${this.env.GROUPS}/${id}`, httpOptions).pipe(
map(groups => groups)
);
}

Component

messages: any;
loading: any;
ngOnInit() {
this.getData();
}
async getData() {
this.loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});
await this.loading.present();
const id = this.activatedRoute.snapshot.paramMap.get('id');
this.groupsService.getGroupsDetails(id).subscribe(res => {
console.log('res', res);
this.messages = res;
this.hideLoading();
});
}
private hideLoading() {
this.loading.dismiss();
}

html file

<div *ngFor="let message of messages.notes">
<p>{{message.note}} <br> {{message.user.name}} </p>
</div>

Sample data (by postman)

{
"data": {
"id": 1,
"name": "Default Group",
"photo": null,
"description": "First group for testing purpose only.",
"created_at": "10-05-2020 | 04:05:15 AM",
"users": [
{
"id": 1,
"name": "Sam",
"username": "admin",
"phone": "0812100000000",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
},
{
"id": 2,
"name": "Rudy",
"username": "rudy",
"phone": "0812100000001",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
},
{
"id": 3,
"name": "Putri",
"username": "putri",
"phone": "08121000000002",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
}
],
"admins": [
{
"id": 1,
"name": "Sam",
"username": "admin",
"phone": "0812100000000",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
},
{
"id": 2,
"name": "Rudy",
"username": "rudy",
"phone": "0812100000001",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
}
],
"notes": [ // messages to be loop in html
{
"id": 7,
"note": "hello world",
"user": {
"id": 1,
"name": "Sam",
"username": "admin",
"phone": "0812100000000",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
},
"created_at": "18-05-2020 | 08:05:27 AM"
},
{
"id": 8,
"note": "hello world",
"user": {
"id": 1,
"name": "Sam",
"username": "admin",
"phone": "0812100000000",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
},
"created_at": "18-05-2020 | 08:05:08 AM"
},
{
"id": 9,
"note": "hello world",
"user": {
"id": 1,
"name": "Sam",
"username": "admin",
"phone": "0812100000000",
"photo": null,
"email": "[e-mail]",
"created_at": "10-05-2020 | 04:05:15 AM"
},
"created_at": "18-05-2020 | 08:05:19 AM"
}
]
},
"message": "Groups retrieved successfully."
}

注意：当我打开url时，我看不到network选项卡中发送到服务器的任何请求，也无法在控制台选项卡中获得console.log('res', res);的结果。not sure if that's important or not but good to share :)

知道吗？

更新

根据elclanrs评论，我更改了我的html代码，如下所示：

<div *ngIf="messages">
<div *ngFor="let message of messages.notes">
<p>{{message.note}} <br> {{message.user.name}} </p>
</div>
</div>

Result

ERROR TypeError: Cannot read property 'length' of undefined消失了，但此错误仍然ERROR TypeError: Cannot read property 'notes' of undefined，并且尚未在文件中打印html任何内容。

Answer 1

<ng-container *ngIf="messages && messages.notes">
<div *ngFor="let message of messages.notes">
<p>{{message.note}} <br> {{message.user.name}} </p>
</div>
</ng-container>