Angular 属性“长度”未定义

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": "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文件中打印任何内容。

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>