ОШИБКА TypeError: Невозможно прочитать свойство 'seatavailable' из неопределенного

Question

Я работаю в проекте Angular 6 с декораторами @Input и @Output. У меня есть Bookride Component в качестве родительского компонента и RideDetails в качестве дочернего компонента. Я мог успешно передать данные из родительского компонента в дочерний компонент с помощью декоратора @Input, но когда я попытался передать данные из дочернего компонента в родительский компонент, в консоли появляется следующая ошибка

"ОШИБКА TypeError: Невозможно прочитать свойство 'seatavailable' не определено"

Компонент BookRide - HTML (родительский компонент)

<tr *ngFor = "let book of shrides | filterpipe:filterargs" (click) = "message = book">
  <td>{{book.startloc}}</td>
  <td>{{book.destination}}</td>
  <td>{{book.seatsavailable}}</td>
  <td (click)="deleteProduct(book.id)"><a>DELETE</a></td>
  <td [routerLink] = "['/update-ride', book.id]" (click) = "update(book.id)"><a>UPDATE</a></td>

<app-ridedetails [cName] = "message" (onRegister)="courseReg($event)"></app-ridedetails>

В консоли ошибка появляется в приведенной выше строке как «ОШИБКА TypeError: Невозможно прочитать свойство« seatavailable »из undefined в RestserviceService.push ../ src / app / restservice.service.ts.RestserviceService.updateRide2 (restservice.service) .ts: 84) "

BookRide Component - TS

export class RidedetailsComponent implements OnInit { 
seatsavailable: number;
courseReg(seatsavailable: number){
        console.log("Booking ID", seatsavailable);
        this.messages = `Booking Done. Your Booking name is : ${seatsavailable}`;
        this.render = !this.render;
}}

Компонент RideDetails - HTML (дочерний компонент)

     <tr>
          <td>{{loadData?.id}}</td>
          <td>{{loadData?.name}}</td>
          <td>{{loadData?.car}}</td>
          <td>{{loadData?.seatsavailable}}</td>
          <td>{{loadData?.startloc}}</td>
          <td>{{loadData?.destination}}</td>
      </tr>

<button type="button" (click)="register(loadData.id, loadData.seatsavailable)" [ngClass] = "render ? 'btn-primary' : 'btn-danger'"> {{render == true ? 'Book!' : 'Cancel! Booked ride'}} </button>

Компонент RideDetails - TS

export class RidedetailsComponent implements OnInit {
  loadData:any;
  sendData: any;
  messages: any;
  render: boolean = true;
  seatsavailable: number;
  ride: Ride[];
  constructor(private restservice : RestserviceService) { }

  ngOnInit() {
  }

  @Input() set cName(sampleObject){
    this.loadData=sampleObject;
  }

  //Child to Parent Communication
  //Sending an event to BookrideComponent and hide the table using @Output Decorator
  @Output() onRegister = new EventEmitter();

  register(bookingID: string, seatsavailable: number, ride: Ride) {
    this.render = !this.render;
    this.onRegister.emit({seatsavailable} as Ride);
    this.messages = `Booking Done(ridedetails). Your Booking id: ${bookingID}`;
    console.log("After clicking on Book button, the seats available data in ride details component is", this.loadData.seatsavailable);
    // console.log("seats avaiable in ride details component", this.loadData.seatsavailable);
    if(this.loadData.seatsavailable === seatsavailable){
      console.log("this.loadData.seatsavailable", this.loadData.seatsavailable - 1);
      this.restservice.updateRide2(ride, seatsavailable).subscribe( shride => { this.loadData.seatsavailable - 1 });
    } 
   }
}

Что я понял из компонента RideDetails, так это то, что я создал свойство onRegister типа EventEmitter и прикрепил декоратор @Output, который делает свойство отправлять данные от дочернего к родительскому компоненту. Позже внутри register (), он отправляет значение seatavailable обратно в родительский компонент. Поэтому, как только он достигает родительского компонента, он завершается с ошибкой.

Также в courseReg () компонента BookRide она отображает консоль с именем вашего бронирования: [объект объекта]

Answer 1

Кажется, все правильно, но у меня есть несколько изменений в вашем коде - я не уверен, что это будет работать, но вы можете попробовать

this.onRegister.emit(seatsavailable); если вы просто отправляете seatsavailable от дочернего элемента к родительскому, просто передайте только значение, которое будет передано в качестве объекта.

Наконец, когда вы читаете свое значение, вы можете читать так -

courseReg(event: any){
        console.log("Booking ID", event.seatsavailable);
        this.messages = `Booking Done. Your Booking name is : ${event.seatsavailable}`;
        this.render = !this.render;
}}

Я уверен, что это может сработать, пожалуйста, попробуйте спасибо Happy!

Answer 2

Эта ошибка обычно связана с тем, что объект не был разрешен до загрузки маршрута. Поэтому мы используем экзистенциальный / безопасный оператор book? (экзистенциальный - существует ли он). Если ошибка вызвана этим, лучшим подходом (если вы не используете загрузочный счетчик) является использование углового преобразователя, который разрешает данные в вашем компоненте до загрузки маршрута.

Вот отличная статья о Resolvers, если вы не знакомы: https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

Следовательно, ваши данные будут доступны в компоненте до того, как маршрут будет разрешен, и вам не нужно будет использовать ?, чтобы проверить, существуют ли данные.