错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“customerName”答案

【问题标题】：Error: Uncaught (in promise): TypeError: Cannot read property 'customerName' of undefined错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“customerName”
【发布时间】：2019-06-26 10:42:01
【问题描述】：

我的 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 的组件中，如下所示：

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>

现在我可以在模板中显示值（客户名称、价格 ..）：

但是当我log 并看到相同的值（客户名称、价格..）时，显示为 undefined。

我找不到问题所在。

DEMO

【问题讨论】：

标签： javascript node.js angular typescript ecmascript-6

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你有这个错误是因为你正在按对象访问数组值

console.log( this.customers.data.customerName); // this are array value

所以如果你想看到你必须这样做的数据

 console.log( this.customers[0].data.customerName); // this are array value

【讨论】：

如何记录所有客户？现在我只能记录一个。
与您在 html 中所做的相同，带有一个 foreach 循环：for (const customer of this.customers) {console.log(customer.data.customerName);}

【解决方案3】：

您正在返回一个对象数组，知道数组索引从零开始。这将起作用

console.log(this.customers[index].data.customerName);

将“索引”更改为 0,1,2 以分别获取第一个、第二个或第三个对象的 customerName

【讨论】：

收到此错误ReferenceError: index is not defined ReferenceError: index is not defined
将单词 [index] 更改为 0 或 1 或 2 以分别获取第一个、第二个或第三个对象的 customerName。例如 console.log(this.customers[index].data.customerName);
对不起，我的意思是 console.log(this.customers[2].data.customerName) 不是 console.log(this.customers[index].data.customerName)

【解决方案4】：

this.customers 是一个数组元素。

使用 forEach() 列出每个元素。 Array.prototype.forEach()

this.customers.forEach(function(element) {
    console.log(element.data.customerName);
});

【讨论】：