Angular 角形火基类型'；字符串'；不可分配给类型'；日期

我得到了错误

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

toDate（）|日期

我明白了

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

我引用了这个

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

明细表.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>

Pipe.ts

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

}

时间表列表.component.ts

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

}

---

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

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

ngOnInit（）{
this.service.getAppoints（）.subscribe（actionArray=>{
this.list=actionArray.map（项=>{
返回{
…item.payload.doc.data（）
}如期；
})
for（设i=0；i

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

试试这个：

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

{{appoint.appointment_date.seconds*1000 | date:'dd:MM:yyyy hh:MM:ss'}

没有管道会发生什么<代码>{{appoint.appointment\u date.toDate（）}它已经在代码上面的帖子中解释过了。只是管道。保留

toDate（）

这不是我想要的。我需要得到客户在datepicker上选择的日期。所以我需要获得约会日期我应该在哪里插入这个？在你设置项目之后，在子目录的某个地方。我明白了，所以我仍然会像这样引用它，

{{appoint.appointment\u date.toDate（）|date}

，这样我就不需要像那样引用它了吗？对不起，我对angular有点不熟悉。你只要把秒转换成日期，然后替换当前值。在模板中，它可以像

{{appoint.appointment_date | date:'dd:MM:yyyyy'}}

我可以问你秒*1000如何给你日期我在这里有点困惑吗？这没用

无法读取未定义的属性“seconds”

Sure@Swoox，JavaScript使用毫秒，因此您必须将时间戳从秒转换为毫秒乘以1000@BARNOWL你能检查一下你是否得到了正确的数据吗？1秒*1000=1000秒嗯？为了制造一毫秒，你做了1/1000，对吗？