编辑 - firebase时间戳引起的＆＃x27;无法读取NULL＆＃x27;的属性。添加新文档时HTML插值的错误

Question

session.startdate是一个firebase时间戳，我正在使用todate（）函数和html中的日期管道转换它。这效果很好，直到我开始通过服务添加文档。

{{session.startDate.toDate() | date}}

添加了新文档后，虽然所有内容都可以在屏幕上正确渲染，但我收到了大量愤怒的控制台消息：

ERROR TypeError: Cannot read properties of null (reading 'toDate')

因此，我猜想当服务添加该文档时，有足够的时间开始启动Doctate。 （）函数失败，直到数据存在为止。

我敢肯定，我想做的事情很简单，我不确定我应该在项目的何处等待数据，也是这样做的最佳方法。

为此，我使用的是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))
  }

Answer 1

好吧，该解决方案非常简单，但我花了一段时间才弄清楚问题是什么。最后，我回到了我第一次使用firebase时间戳上的文章中等。有很多细节，但结果是，在时间戳最终确定之前，将默认返回零值，这是导致我的空错误的原因。

解决方案是使用' nofollow noreferrer'> 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 };
        })
      }
      ))
  } 

有一个类似的问题我在寻找解决方案时发现。