带有 angular 云 Firestore 和 [(ngModel)] 的 matDatePicker

Question

对于实时数据库，我使用 angular material matDatePicker 来保存日期消息。

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

  "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}

Answer 1

似乎正在保存的对象是 firebase.firestore.Timestamp. This change was added in Firebase JS SDK v4.13.0 类型，其中 JavaScript Date 个对象将被保存 Timestamp.

在 Timestamp class 中，有一个名为 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;
}

带有 angular 云 Firestore 和 [(ngModel)] 的 matDatePicker

matDatePicker with angular cloud firestore and [(ngModel)]

datepicker

angular-material

ngmodel

angular

angularfire5