在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模板，但打字稿內文件我收到未定義的錯誤？

來源

2017-07-26 Sisky

因爲'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值。希望能幫助到你！！

來源

2017-07-26 03:47:44 pinkfloyd

謝謝我結束了非常相似。 – 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)); 

}

來源

2017-07-26 04:48:42 Sisky

你可以檢查@DavidAlejandroReyesMilián答案嗎？這是1小時前回答的。 – k11k2

@ k11k2不完全一樣。 – Sisky

在Typescript中未定義的數組，但在HTML中工作

回答

相關問題