角度火力基地类型“字符串”不可分配给类型“日期”

Question

我得到了错误。

无法读取未定义的属性“toDate”。没有toDate() | Date

我明白了

时间戳（秒=1545109200，纳秒=0）

我引用了这个Angular 6 firebase snapshot returns undefined

但是，将时间戳转换为可读的日期字符串并不是特定的。 期望的输出是 2018 年 12 月 6 日。沿着这些思路。

schedule-list.component.html

<div class="container ">
    <div class="row">
      <div *ngFor="let appoint of list" class="col-md-8 myCenter mt-2"> 
        <!-- the bottom code should work if items within list exist. -->
        <div class="card">
          <div class="card-header">
              Title: {{appoint.name}}

          </div>
          <div class="card-body">
            <p>{{appoint.appointment_date.toDate() | date}}</p>
          </div>
      </div>
    </div>
  </div>
</div>

schedule.model.ts

export class Schedule {
    name:string;
    appointment_date:string;
}

Pipe.ts

import {formatDate} from '@angular/common';
import {Inject, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
import {firestore} from 'firebase/app';
import Timestamp = firestore.Timestamp;

@Pipe({
  name: 'fireStoreDatePipe'
})
export class FireStoreDatePipePipe implements PipeTransform {

  constructor(@Inject(LOCALE_ID) private locale: string) {
  }

  transform(timestamp: Timestamp, format?: string): string {
      return formatDate(timestamp.toDate(), format || 'medium', this.locale);
  }
}

Schedule-list.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { ScheduleService } from '../schedule.service';
import { Schedule } from '../models/schedule.model';
import {FireStoreDatePipePipe} from '../fire-store-date-pipe.pipe';
import { Timestamp } from '@firebase/firestore-types';
@Component({
  selector: 'app-schedule-list',
  templateUrl: './schedule-list.component.html',
  styleUrls: ['./schedule-list.component.css']
})
export class ScheduleListComponent implements OnInit {
  list:Schedule[];
  constructor(private firestore: AngularFirestore, private service: ScheduleService ) { }

  ngOnInit() {
    this.service.getAppointments().subscribe(actionArray =>{
      this.list = actionArray.map(item =>{
        return{
          ...item.payload.doc.data()
        } as Schedule;
      })
    });
  }

  getSchedules(){
    return this.firestore.collection('schedules').snapshotChanges();
  }

}

Answer 1

你必须将你的时间戳乘以 1000，我已经遇到了同样的问题；

试试这个：

<p>{{ appoint.appointment_date.seconds * 1000 | date:'dd:MM:yyyy hh:mm:ss' }}</p>

Answer 2

因为您有第二个时间戳，您可以执行以下操作使其成为日期：

ngOnInit() {
    this.service.getAppointments().subscribe(actionArray =>{
      this.list = actionArray.map(item =>{
        return{
          ...item.payload.doc.data()
        } as Schedule;
      })
      for(let i = 0; i < this.list.length; i++){
        console.log(this.list[i].appointment_date); // to see if the data is undefined!
        this.list[i].appointment_date = new Date(new Date(0).setUTCSeconds(this.list[i].appointment_date.seconds));
      }
    });
  }
));