сбор списка, отправленного из бэкэнда в angular

Question

Итак, у меня есть класс Customer и Vehicle в бэкэнде. Они сопоставляются друг с другом следующим образом

@Entity
@Table(name="customer")
public class Customer {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    private String name;
    private String email;
    private String address;

    @OneToMany(fetch=FetchType.LAZY, mappedBy="customer", cascade = CascadeType.ALL)
    @JsonIgnore
    private List<Vehicle> vehicles;

    //... getter and settors
}

@Entity
@Table(name="vehicle")
public class Vehicle {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    private String vin;
    private String warrantyPeriod;

    @ManyToOne
    @JoinColumn(name="customer_id")
    private Customer customer;

    //...getters and settors
}

Я создал записи в базе данных следующим образом

Заказчик:

Транспортное средство:

Теперь, когда я пытаюсь получить значение гарантийный период из транспортного средства в объекте клиента в интерфейсе angular в ngOnInit () следующим образом

ngOnInit() {

    this.id = this.route.snapshot.params['id'];

    this.customerService.getCustomer(this.id)
      .subscribe(data => {
        console.log(data)
        this.customer = data;
      }, error => console.log(error));
      console.log(this.customer.vehicles[0].warrantyPeriod);
  }

выдает ошибку, говорящую ERROR TypeError: Cannot read property '0' of undefined Служба customerService настроена правильно для извлечения значений из серверной части и печатает правильные значения для имени, адреса электронной почты и адреса. только проблема с объектом списка. Может кто-нибудь объяснить мне, как я могу собрать значения объекта списка в интерфейсе? Объект Customer в angular объявлен в файле customer.ts следующим образом:

import { Vehicle } from './vehicle';
export class Customer{
    id: number;
    name: string;
    email: string;
    address: string;
    vehicles: Vehicle[];
}

PS: console.log(this.customer.vehicles.length); выдает ту же ошибку. Также я проверил интерфейс, он отправляет все данные.

Answer 1

Попробуйте 'this.id = this.route.snapshot.params [' customer_id ']' в своем интерфейсе

Answer 2

Причиной возникновения этой ошибки является то, что вы пытались получить доступ к переменной undefiend. Попробуйте поместить свой бизнес-логи c в метод подписки, так как http - это весь остальной код, который находится после выполнения запроса, прежде чем получить ответ от бэкэнда.

 this.customerService.getCustomer(this.id)
  .subscribe(data => {
    console.log(data)
    this.customer = data;
    console.log(this.customer.vehicles[0].warrantyPeriod); // Moved the console.log here
  }, error => console.log(error));