Question

使用实时数据库，我使用角度材料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}

Answer 1

似乎正在保存的对象是Firebase JS SDK v4.13.0类型。此更改已添加到toDate中，其中JavaScript Date对象将保存为Timestamp类型。

在Timestamp课程中，有一个名为{{3}}的方法，可将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;
}

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

1 个答案: