javascript - Formatarea timpului în Typescript Angular

Vreau să iterez time în FormArray și primesc timpul de la API în formatul de mai jos:

14.21.00

Vreau să formatez acest timp astfel:

2:21 PM

Încerc să formatez folosind Angular DatePipe astfel:

{{summon.value.summonTime | date :'shortTime' }}

dar a apărut eroarea:

Eroare: InvalidPipeArgument: 'Nu se poate converti "14.21.00" într-o dată' pentru pipe-ul 'DatePipe'

aici am reprodus în stackblitz

Pe baza cercetărilor mele, 14.21.00 nu este un format de timp acceptat în JavaScript/TypeScript, dacă există vreun ghid sau sugestie pentru a rezolva acest lucru.

Răspuns #1

Încearcă asta (testat pe codul tău stackblitz):

time:{{'1990-10-10 '+ summon.value.summonTime.split('.').join(':') | date:'shortTime' }}

Pentru a folosi pipe-ul „date”, timpul trebuie să urmeze și o dată, astfel încât putem trece orice dată doar pentru a valida pipe-ul date. De exemplu, acesta funcționează: {{'1990-10-10 01:02:03' | date:'shortTime'}}, iar acesta nu funcționează: {{'01:02:03' | date:'shortTime'}}.

De asemenea, am înlocuit "." (puncte) din timp cu ":" folosind split și join pentru a obține formatul necesar.

Răspunsul #2

Sper că îți merge grozav!!!

Creează un nou Pipe în folderul dorit. Odată ce ai terminat, te rugăm să furnizezi detalii în modulul (import și declarație): -

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

@Pipe({
  name: 'dateTransformer'
})
export class DateTransformerPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value && value.length > 0 ? value.replace('.', ':') : value;
  }
}

Odată terminat, actualizează acest lucru în fragmentul tău: -

<ng-container [formGroupName]="i">
  <input type="checkbox" formControlName="isChecked" />
  {{ summon.value.summonTime | dateTransformer }}
  item: {{ summon.value.itemNo }}
  <br />
  time:{{ summon.value.summonTime | dateTransformer }}
  <br />
</ng-container>

Sper că am reușit să îți rezolv problema! Programare fericită!! Noroc!!!