Ошибка: Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'customerName' из неопределенного

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>

Теперь я могу отображать значения (customerName, price ..) в шаблоне:

Но когда я log и вижу те же значения (customerName, price ..), показывая как undefined .

Я не могу найти, что пошло не так.

DEMO

Answer 1

У вас есть эта ошибка, потому что вы получаете доступ к значению массива по объекту

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

так что если вы хотите увидеть данные, которые вы должны сделать, как это

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

Answer 2

Использование оператора безопасной навигации для обработки неопределенной ошибки

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

Answer 3

this.customers является элементом массива.

Используйте forEach () для перечисления каждого элемента. Array.prototype.forEach ()

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

Answer 4

вы возвращаете массив объектов, зная, что индекс массива начинается с нуля.Это будет работать

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

Измените «index» на 0,1,2, чтобы получить customerName первого, второго или третьего объекта соответственно