具有角云firestore和[（ngModel）]的matDatePicker

Posted 2021-05-01

使用实时数据库，我使用角度材料matDatePicker来保存日期新闻。

由于我已经继续使用firestore集合，当我在一个角度服务中调用保存的日期时，它将它显示为一个对象

  "date": {
     "seconds": 1529445600,
     "nanoseconds": 0
  },

我不能在[（ngModel）]中使用它。看起来它不再是一个字符串，因此matDatepicker matInput不再识别它。

那么我应该如何将matDatepicker值绑定到我视图的ngModel中呢？

模板：

    <mat-form-field>
      <input matInput [matDatepicker]="picker" 
        placeholder="Date" required readonly
        [(ngModel)]="news.date"
            (ngModelChange)="updateField(news,'date',news.date)">
      <mat-datepicker-toggle matSuffix type="button" [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

服务：

getNewsWithKey(key: string): Observable<SingleNews> {
const newsPath = `news/${key}`;
this.news = this.afs.doc<any>(newsPath)
  .snapshotChanges().map(action => {
    const $key = action.payload.id;
    const data = { $key, ...action.payload.data() }
    return data;
  });
return this.news}

答案

看来正在保存的对象是firebase.firestore.Timestamp类型。此更改已添加到Firebase JS SDK v4.13.0中，其中javascript Date对象将保存为Timestamp类型。

在Timestamp类中，有一种名为toDate的方法，它将Timestamp转换为JavaScript Date对象。

这是你可以做的：

• 您可以尝试使用转换的Timestamp分配临时对象，以及远程保存的任何数据。 getNewsWithKey(key: string): Observable<SingleNews> { const newsPath = `news/${key}`; this.news = this.afs.doc<any>(newsPath) .snapshotChanges().map(action => { const $key = action.payload.id; const data = Object.assign(action.payload.data(), { date: action.payload.data().date.toDate(), $key: action.payload.id }); return data; }); return this.news; }