Угловая ошибка нестандартной трубы для даты в виде строки - PullRequest
Новая
       37

Угловая ошибка нестандартной трубы для даты в виде строки

1 голос
/ 27 июня 2019

У меня есть дата в строковом формате в коллекции Firebase, и я пытаюсь ее отобразить.Насколько я понимаю, конвейерные фильтры не работают для строк, а только для объектов Date.Для этого мне нужно использовать пользовательскую трубу.

Я использовал следующую функцию : 

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

 }

Первый из них дает ошибку ниже:

, а второй дает недопустимую дату.

Ниже приведены данные в коллекции:

Ниже приведен файл pipe : 

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 : 

  <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>

PS SubmissionDateработает нормально, так как это объект даты, тогда как fromDate и endDate не работают.

Есть предложения?

Заранее спасибо

enter image description here

enter image description here

1 Ответ

1 голос
/ 28 июня 2019

Формат даты в endDate и fromDate не будет работать с DatePipe; Итак, вам нужно преобразовать этот конкретный формат в дату, прежде чем вы сможете использовать DatePipe;

релевантно pipe.ts : 

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

релевантно html : 

  <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>

релевантно TS : 

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"}'}
    ]

завершено здесь работает стек стека

...