![](/img/trans.png)
[英]TypeError cannot read property “length” of undefined - angular 4
[英]Angular property 'length' of undefined
我正在嘗試獲取已打開路線的詳細信息(基於 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": "admin@admin.com",
"created_at": "10-05-2020 | 04:05:15 AM"
},
{
"id": 2,
"name": "Rudy",
"username": "rudy",
"phone": "0812100000001",
"photo": null,
"email": "rudy@admin.com",
"created_at": "10-05-2020 | 04:05:15 AM"
},
{
"id": 3,
"name": "Putri",
"username": "putri",
"phone": "08121000000002",
"photo": null,
"email": "putri@admin.com",
"created_at": "10-05-2020 | 04:05:15 AM"
}
],
"admins": [
{
"id": 1,
"name": "Sam",
"username": "admin",
"phone": "0812100000000",
"photo": null,
"email": "admin@admin.com",
"created_at": "10-05-2020 | 04:05:15 AM"
},
{
"id": 2,
"name": "Rudy",
"username": "rudy",
"phone": "0812100000001",
"photo": null,
"email": "rudy@admin.com",
"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": "admin@admin.com",
"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": "admin@admin.com",
"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": "admin@admin.com",
"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
文件中打印任何內容。
<ng-container *ngIf="messages && messages.notes">
<div *ngFor="let message of messages.notes">
<p>{{message.note}} <br> {{message.user.name}} </p>
</div>
</ng-container>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.