javascript - 错误: Uncaught (in promise): TypeError: Cannot read property 'customerName' of undefined

Question

我的 JSON 文件如下所示:

{
    "total": 3,
    "items": [
        {
            "id": "01",
            "data": {
                "customerName": "Jhon",
                "description": "..some content..",
                "price": "25000"
            },
            "status": "Yes"
        },
        {
            "id": "02",
            "data": {
                "customerName": "Mark",
                "description": "..some content..",
                "price": "30000"
            },
            "status": "No"
        },
        {
            "id": "03",
            "data": {
                "customerName": "Smith",
                "description": "..some content..",
                "price": "15000"
            },
            "status": "No"
        }
    ]
}

我将它们显示在名为 list 的组件中，如下所示:

ts

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contacts.service';
import { ICustomer } from '../models';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  public allCustomers: any = [];
   public customers: any = [];
  constructor(private myService: ContactService) { }

  public async ngOnInit(): Promise<void> {
    this.allCustomers = await this.myService.getCustomers('');
    this.customers = this.allCustomers.items;
    console.log( this.customers.data.customerName);
  }


}

模板

<div *ngFor="let customer of customers">
    <p>{{customer.data.customerName}}</p>
    <p>{{customer.data.price}}</p>
</div>

现在我可以在模板中显示值(客户名称，价格..):

但是当我登录并看到相同的值(客户名称、价格..)时，显示为未定义。

我找不到问题所在。

<强> DEMO

Answer 1

使用安全导航操作符处理未定义的错误

<div *ngFor="let customer of customers">
    <p>{{customer?.data?.customerName}}</p>
    <p>{{customer?.data?.price}}</p>
</div>