session.startDate 是一個 Firebase 時間戳，我正在使用 toDate() 函式和我的 HTML 中的日期管道對其進行轉換。這很好，直到我開始通過服務添加檔案。
{{session.startDate.toDate() | date}}
添加新檔案后，雖然螢屏上的所有內容都會正確呈現，但我收到了大量憤怒的控制臺訊息：
ERROR TypeError: Cannot read properties of null (reading 'toDate')
所以，我猜當服務添加檔案時，在填充 startDate 之前有足夠的時間 .toDate() 函式在資料存在之前失敗。
我確定我正在嘗試做的事情非常簡單，我只是不確定我應該在我的專案中的什么時候等待資料，以及最好的方法。
為此，我使用了 2 個組件：顯示組件和服務組件。
顯示組件 首次加載顯示時，我獲取當前路由 ID，并將 sessionSource 設定為訂閱的 sessionService。
ngOnInit(): void {
this.subscribe = this.activatedRoute.paramMap.subscribe(params => {
this.pid = params.get('pid');
})
this.sessionService.getSessionList(this.pid).subscribe((value) => {
this.sessionSource = value
});
}
然后在 HTML 中，我運行 *ngFor 來顯示不同檔案的串列。
<mat-expansion-panel *ngFor=" let session of sessionSource"
<mat-expansion-panel-header>
<mat-panel-title>
{{session.startDate.toDate() | date}}
</mat-panel-title>
<mat-panel-description>
{{session.sessionDescription}}<div *ngIf="session.active"> - Active Session</div>
</mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-panel>
會話服務 當我使用我的服務添加一個新會話時，這就是正在運行的內容（注意，有一些正在進行的“回傳”功能來獲取新創建的檔案 ID 以用于路由，但我還沒有開始作業）。
這成功地添加了一個新條目，并按預期顯示在頁面上，但出現上述錯誤。
startNewSession(pid: string){
return this.afs.collection("/Management/" pid "/Sessions").add({
active: true,
startDate: firebase.firestore.FieldValue.serverTimestamp(),
sessionDescription: 'Testing Adding'
}).then(docRef => {
return docRef.id
}).catch(error => console.error("Error adding document: ", error))
}
uj5u.com熱心網友回復：
好吧，解決方案非常簡單，但我花了一段時間才弄清楚問題所在。最后，我回到了我第一次在medium上使用 firebase 時間戳時讀過的一篇文章。有很多細節，但結果是，在時間戳最終確定之前，它將默認回傳一個空值，這就是導致我的空錯誤的原因。
解決方案是使用“ SnapshotOptions ”來修改每個檔案快照，并估計時間戳是什么。我不需要納秒精度，所以這非常適合我的使用。
最后，我的更改甚至不在我最初發布的內容中，而是在服務內部，并且回傳了 ngOnIt 中 sessionSource 的訂閱。
下面是整個部分，但我所做的只是將 { serverTimestamps: 'estimate' } 添加為 payload.doc.data() 函式的選項。這組是一個估計的時間戳，我不再有空錯誤。
getSessionList(pid: string){
return this.afs.collection(this.CollectionPath pid '/Sessions', ref => ref.orderBy('startDate', 'desc')).snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data({ serverTimestamps: 'estimate' }) as sessions_list;
const id = a.payload.doc.id;
return { id, ...data };
})
}
))
}
我在尋找解決方案時發現了一個類似的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/478920.html