ERROR TypeError: Cannot read property 'seatsavailable' of undefined

Question

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

"ERROR TypeError: Cannot read property 'seatsavailable' of undefined"

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>

In the console, Error appears in the above line as "ERROR TypeError: Cannot read property 'seatsavailable' of undefined at 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

这个错误一般是因为在加载路由之前没有解析对象。因此，我们使用 existential/safe 运算符 book?（存在 - 是 'exist'）。如果错误是由此引起的，最好的方法（除非您使用加载微调器）是使用 Angular 解析器，它会在加载路由之前解析组件中的数据。

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

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

Answer 2

一切似乎都是正确的，但我对您的代码进行了一些更改 - 我不确定它是否有效，但您可以尝试

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

我确定这可能有效，请尝试谢谢编码愉快！！

ERROR TypeError: Cannot read property 'seatsavailable' of undefined

ERROR TypeError: Cannot read property 'seatsavailable' of undefined

typescript

angular-decorator

angular