Angular 日期作为字符串的角度自定义管道错误_Angular_Typescript_Angular Material_Angular7_Angular Pipe

Angular 日期作为字符串的角度自定义管道错误

angular typescript angular-material

Angular 日期作为字符串的角度自定义管道错误,angular,typescript,angular-material,angular7,angular-pipe,Angular,Typescript,Angular Material,Angular7,Angular Pipe,我在firebase集合中有一个字符串格式的日期，我正在尝试显示它。据我所知，管道过滤器不适用于字符串，只适用于日期对象。为此，我需要使用自定义管道我使用了下面的功能： transform(value: string) { var datePipe = new DatePipe("en-US"); value = datePipe.transform(value, 'MM-dd-yyyy'); return value; } transform(value: st

我在firebase集合中有一个字符串格式的日期，我正在尝试显示它。据我所知，管道过滤器不适用于字符串，只适用于日期对象。为此，我需要使用自定义管道

我使用了下面的功能：

transform(value: string) {
    var datePipe = new DatePipe("en-US");
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
}

transform(value: string) {
    let d = new Date (value);
    return moment(d).format('DD-MM-YYYY');

 }

  <tr *ngFor="let v of list">
                <td>{{v?.NoOfDays}}</td>
                <td>{{v?.vacationType|json}}</td>
                <td>{{v?.SubmissionDate.toDate()|date}}</td>
                <td>{{v?.fromDate| dateFormatPipe  }}</td>
                <td>{{v?.endDate | dateFormatPipe }}</td>

              </tr>

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateFormatPipe'
})
export class FilterPipe implements PipeTransform {
  transform(value: string) {
    var datePipe = new DatePipe("en-US");
    try{
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
    }
    catch(exp){
      let myVar = JSON.parse(value);
      let myDate = new Date(myVar.year, myVar.month, myVar.day)
      value = datePipe.transform(myDate, 'MM-dd-yyyy');
      return value;
    }
  }
}

  <tr *ngFor="let v of list">
    <td>{{v?.NoOfDays}}</td> 
    <td>{{v?.vacationType|json}}</td>
    <td>{{v?.SubmissionDate|date}}</td>
    <td>{{v?.fromDate| dateFormatPipe  }}</td>
    <td>{{v?.endDate | dateFormatPipe }}</td>
  </tr>

this.list=[
      {NoOfDays: 4, vacationType:'official', SubmissionDate: '06/20/2019',
      fromDate: '{"year":"2019","month":"6","day":"24"}', endDate: `{"year":"2019","month":"6","day":"27"}`},
      {NoOfDays: 2, vacationType:'sick', SubmissionDate: '06/28/2019',
      fromDate: '{"year":"2019","month":"7","day":"2"}', endDate: '{"year":"2019","month":"7","day":"3"}'}
    ]

还有一个有力矩的：

transform(value: string) {
    var datePipe = new DatePipe("en-US");
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
}

transform(value: string) {
    let d = new Date (value);
    return moment(d).format('DD-MM-YYYY');

 }

  <tr *ngFor="let v of list">
                <td>{{v?.NoOfDays}}</td>
                <td>{{v?.vacationType|json}}</td>
                <td>{{v?.SubmissionDate.toDate()|date}}</td>
                <td>{{v?.fromDate| dateFormatPipe  }}</td>
                <td>{{v?.endDate | dateFormatPipe }}</td>

              </tr>

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateFormatPipe'
})
export class FilterPipe implements PipeTransform {
  transform(value: string) {
    var datePipe = new DatePipe("en-US");
    try{
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
    }
    catch(exp){
      let myVar = JSON.parse(value);
      let myDate = new Date(myVar.year, myVar.month, myVar.day)
      value = datePipe.transform(myDate, 'MM-dd-yyyy');
      return value;
    }
  }
}

  <tr *ngFor="let v of list">
    <td>{{v?.NoOfDays}}</td> 
    <td>{{v?.vacationType|json}}</td>
    <td>{{v?.SubmissionDate|date}}</td>
    <td>{{v?.fromDate| dateFormatPipe  }}</td>
    <td>{{v?.endDate | dateFormatPipe }}</td>
  </tr>

this.list=[
      {NoOfDays: 4, vacationType:'official', SubmissionDate: '06/20/2019',
      fromDate: '{"year":"2019","month":"6","day":"24"}', endDate: `{"year":"2019","month":"6","day":"27"}`},
      {NoOfDays: 2, vacationType:'sick', SubmissionDate: '06/28/2019',
      fromDate: '{"year":"2019","month":"7","day":"2"}', endDate: '{"year":"2019","month":"7","day":"3"}'}
    ]

第一个错误如下：

第二个是给出无效日期

以下是集合中的数据：

下面是管道文件：

import {Pipe, PipeTransform} from '@angular/core';
import { DatePipe } from '@angular/common';
import * as moment from 'moment'

@Pipe({
    name: 'dateFormatPipe'
  })
export class formatDate implements PipeTransform {
  transform(value: string) {
    var datePipe = new DatePipe("en-US");
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
}
}

下面是html：

transform(value: string) {
    var datePipe = new DatePipe("en-US");
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
}

transform(value: string) {
    let d = new Date (value);
    return moment(d).format('DD-MM-YYYY');

 }

  <tr *ngFor="let v of list">
                <td>{{v?.NoOfDays}}</td>
                <td>{{v?.vacationType|json}}</td>
                <td>{{v?.SubmissionDate.toDate()|date}}</td>
                <td>{{v?.fromDate| dateFormatPipe  }}</td>
                <td>{{v?.endDate | dateFormatPipe }}</td>

              </tr>

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateFormatPipe'
})
export class FilterPipe implements PipeTransform {
  transform(value: string) {
    var datePipe = new DatePipe("en-US");
    try{
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
    }
    catch(exp){
      let myVar = JSON.parse(value);
      let myDate = new Date(myVar.year, myVar.month, myVar.day)
      value = datePipe.transform(myDate, 'MM-dd-yyyy');
      return value;
    }
  }
}

  <tr *ngFor="let v of list">
    <td>{{v?.NoOfDays}}</td> 
    <td>{{v?.vacationType|json}}</td>
    <td>{{v?.SubmissionDate|date}}</td>
    <td>{{v?.fromDate| dateFormatPipe  }}</td>
    <td>{{v?.endDate | dateFormatPipe }}</td>
  </tr>

this.list=[
      {NoOfDays: 4, vacationType:'official', SubmissionDate: '06/20/2019',
      fromDate: '{"year":"2019","month":"6","day":"24"}', endDate: `{"year":"2019","month":"6","day":"27"}`},
      {NoOfDays: 2, vacationType:'sick', SubmissionDate: '06/28/2019',
      fromDate: '{"year":"2019","month":"7","day":"2"}', endDate: '{"year":"2019","month":"7","day":"3"}'}
    ]


{{v？.NoOfDays}
{{v？.vacationType | json}
{{v？.SubmissionDate.toDate（）| date}
{{v？.fromDate | dateFormatPipe}
{{v？.endDate | dateFormatPipe}

p.S.SubmissionDate工作正常，因为它是一个日期对象，而fromDate和endDate不工作

有什么建议吗

提前谢谢

endDate和fromDate中的日期格式不适用于DatePipe；因此，在使用DatePipe之前，您需要将此特定格式转换为日期