错误TypeError：无法读取未定义的属性'seatavailable'

Question

我正在使用@Input和@Output装饰器在Angular 6项目中工作。我将Bookride Component作为父组件，将RideDetails作为子组件。我可以使用@Input装饰器成功地将数据从我的父组件传递到子组件，但是当我尝试将数据从子组件传递到父组件时，我在控制台中收到以下错误

“ERROR 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>

在控制台中，错误在上面的行中显示为“ERROR TypeError：无法读取属性'seatavailable'的未定义的RestserviceService.push ../ src / app / restservice.service.ts.RestserviceService.updateRide2（restservice.service.ts： 84）”

BookRide组件 - 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值发送回父组件。所以一旦它到达父组件，它就会以错误结束。

同样在BookRide组件的courseReg（）中，它将您的预订名称呈现为控制台：[object Object]

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;
}}

我相信这可行，请尝试谢谢快乐编码!!

Answer 2

此错误通常是由于在加载路由之前未解析对象。因此，我们使用存在/安全运算符book?（存在 - 它'存在'）。如果错误是由此引起的，那么最佳方法（除非您使用加载微调器）是使用Angular解析器，它在加载路径之前解析组件中的数据。

如果您不熟悉，这里有一篇关于解析器的精彩文章：https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

因此，您的数据将在其解析的路径之前在组件中可用，您不需要使用?来检查数据是否存在。