Question

我有一个组件，它从一个服务填充其ngInit()方法中的Object数组，然后我使用HTML模板中的内容。

我的问题是我可以在HTML模板中使用这个数据，但如果我尝试在我的TypeScript文件中使用这个相同的Object数组，我将得到一个未定义的错误。

以下是我的问题的简化代码示例：

@Component({
  selector: 'booking',
  template: `  
    <div *ngFor="let r of requestedBookings">
      <label>Requested on {{r.created | date: 'd MMM H:mm'}}</label>
    </div>
  `
})

export default class BookingComponent {

    requestedBookings: Object[];

    constructor(private bookingService: BookingService) {
      
    }
    
    ngOnInit() {
      
      this.getRequestLog();
      
      // Cannot read property 'length' of undefined error
      // console.log(this.requestedBookings.length);
      
    }
    
   
    private getRequestLog(): void {
      
      this.bookingService.getRoomRequestBooking(1,1,1)
        .subscribe(data => this.requestedBookings = (data as any))
        .results, err => {
          console.log(err);
        }

}

为什么在上面的示例中我可以在HTML模板中按预期使用requestedBookings数组，但在TypeScript文件中我收到未定义的错误？

Answer 1

恕我直言，正确的方法应该是：

ngOnInit() {  
this.getRequestLog();
}

private getRequestLog(): void {
  this.bookingService.getRoomRequestBooking(1,1,1)
    .subscribe((data)=>{
     this.requestedBookings = data;
     console.log(this.requestedBookings.length);
    })
    .results, err => {
      console.log(err);
    }
}

如前所述，对getRoomRequestBooking的调用是异步的，所以在调用console.log之前你不应该期望它会完成。相反，您应该在您知道它将存在的位置使用requestedBookings.length值。希望它有所帮助!!

Answer 2

我通过subscribe方法使用此构造函数修复了此问题。成功完成后会发生complete参数事件。

  subscribe(next?: (value: T) => void, 
            error?: (error: any) => void, 
            complete?: () => void): Subscription;

代码如下：

ngOnInit() {  
  this.getRequestLog();
}

private getRequestLog() {

  this.bookingService.getRoomRequestBooking(this.date, this.level, this.room)
    .subscribe(
      data => this.requestedBookings = (data as any).results,
      err => {
        console.log(err);
      },
      () => console.log(this.requestedBookings.length));

}

在Typescript中未定义数组但在HTML

2 个答案: