Saya perlu mengonversi string waktu (mis. 19:07:33 ke 19:03) nilai data ini diambil dari db melalui API.

<ion-col size="3" class="col">{{res.oraIT |date:'HH:mm' }}</ion-col> 

Di sini konsol kesalahan:

core.js:6210 ERROR Error: InvalidPipeArgument: 'Unable to convert "19:07:33" into a date' for pipe 'DatePipe'
at invalidPipeArgumentError (VM33256 vendor.js:105476)
at DatePipe.transform (VM33256 vendor.js:105867)
at pureFunction2Internal (VM33256 vendor.js:81497)
at ɵɵpipeBind2 (VM33256 vendor.js:81671)
at TimbraHomePage_section_24_div_4_div_13_Template (VM33767 TimbraHomePage.js:269)
at executeTemplate (VM33256 vendor.js:65469)
at refreshView (VM33256 vendor.js:65335)
at refreshEmbeddedViews (VM33256 vendor.js:66460)
at refreshView (VM33256 vendor.js:65359)
at refreshEmbeddedViews (VM33256 vendor.js:66460)
1
Saimon 11 Mei 2021, 02:03

1 menjawab

Jawaban Terbaik

DatePipe menerima Tanggal, string, atau angka. Tetapi mereka semua harus mewakili Tanggal yang valid. Pertama, Anda bisa melakukan ini:

<ion-col size="3" class="col">{{toDate(res?.oraIT) | date : 'HH:mm' }}</ion-col> 

Dalam komponen sudut:

public toDate(fromAPI: string): Date {
  let time: string = fromAPI || '00:00:00';
  return new Date(`01-01-00 ${time}`);
}

Dapat dimengerti, Anda mungkin tidak ingin menjalankan fungsi ketika DatePipe juga menerima string. Sayangnya, sejauh yang saya tahu Interpolasi sudut masih tidak menerima literal templat string sehingga Anda mungkin hanya bisa lolos dengan sesuatu seperti ini:

<ion-col size="3" class="col">{{'01-01-00 ' + (res?.oraIT || '00:00:00') | date : 'HH:mm' }}</ion-col>

Atau Anda bisa membuat DatePipe Anda sendiri yang melakukan apa yang Anda inginkan:

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

@Pipe({ name: 'date2' })
export class DatePipe implements PipeTransform {
    public transform(data: string): string {
        let time: string = data || '00:00:00';
        let date: Date = new Date(`01-01-00 ${time}`);
        let hrs: string = this.pad(`${date.GetHours()}`, 2);
        let mins: string = this.pad(`${date.GetMinutes()}`, 2);
        return `${hrs}:${mins}`;
    }

    public pad(s: string, n: number): string { 
      return s.padStart(n, '0'); 
    }
}

Tambahkan datepipe itu ke deklarasi app.module dan itu menyederhanakan html Anda:

<ion-col size="3" class="col">{{res?.oraIT | date2}}</ion-col> 
0
AndrewBenjamin 11 Mei 2021, 03:06