代码之家 › 专栏 › 技术社区 › BARNOWL

角度火基类型“string”不可分配给类型“Date”

google-cloud-firestore firebase typescript angular

-1

BARNOWL · 技术社区 · 7 年前

我得到了错误。

无法读取未定义的属性“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>

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

烟斗

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);
  }
}

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();
  }

}

2 回复 | 直到 7 年前

dpolicastro 7 年前

你必须将时间戳乘以1000,我已经面临同样的问题;

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

Swoox 7 年前

因为您有一个带有秒的时间戳,您可以执行以下操作将其设置为日期:

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));
      }
    });
  }
));