在Typescript中未定义的数组，但在HTML中工作

问题描述：

我有一个组件，它通过一个服务从我的HTML模板中的内容中填充其ngInit()方法中的Object数组。在Typescript中未定义的数组，但在HTML中工作

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

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

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

 
}

为什么在上面的例子中，我可以使用requestedBookings阵列有望在HTML模板，但打字稿内文件我收到未定义的错误？

因为'getRequestLog'是异步的，并且因此'this.requestedBookings.length'正在运行，则会返回预订之前。 – Rob

@Rob是正确的。 'requestedBookings：Object [];'不是一个实例，它是一个类型声明并且是环境变量。当'ngOnInit'运行时，你的变量没有被实例化。 'requestedBookings：Object [] = [];'将允许控制台日志执行。 – muiiu

那么如何确保getRequestLog（）在我访问数组之前完成？ – Sisky

答

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

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值。希望能帮助到你！！

谢谢我结束了非常相似。 – Sisky

答

我通过使用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)); 

}

你可以检查@DavidAlejandroReyesMilián答案吗？这是1小时前回答的。 – k11k2

@ k11k2不完全一样。 – Sisky

在Typescript中未定义的数组，但在HTML中工作

相关推荐