Angular: 将 SQL 24 小时时间格式转换为 12 小时时间格式

Question

我遇到了与此处所述相同的问题：

convert string to Time format in typescript

我无法转换 SQL 24 小时时间类型，例如“15:00”，我在日志中收到此错误

InvalidPipeArgument: 'Unable to convert "15:00" into a date' for pipe 'DatePipe'

据我了解，DatePipe 只支持某些格式的转换，字符串时间不是其中之一。我找不到任何详细说明如何将字符串时间转换为这些可接受格式的文档，因此我放弃了 DatePipe 的想法。

然后是 momentJs，它很有帮助，但我在将它集成到动态 material table 中时遇到了一些麻烦。因为根据我的理解，它只能在打字稿中使用，不像 datePipe 可以直接在 html 中使用。如我的代码中所示，我只能从第一个数组中获取时间。我试过循环，但我只得到最后一个值。

HTML:

<ng-container matColumnDef="start_time">
      <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
      <td class="font-content" mat-cell *matCellDef="let row">{{ convertedTime }}</td>
    </ng-container>

打字稿：

grabTime(){
    this.dataService.grabTimeContent().subscribe(res=>{
      this.post= res.tableTime;

      this.timeChange = res.table[0].start_time;
      this.convertedTime = moment(this.timeChange, 'HH:mm').format('hh:mm A');
       
      this.dataSource = new MatTableDataSource(this.post);

  });
  }

内容：

tableTime:
   0:
      {
       start_time: "10:08"
      }
   1:
      {
       start_time: "15:25"
      }
   2:
      {
       start_time: "16:58"
      }
   3:
      {
       start_time: "20:18"
      }

我愿意接受诸如使用新包之类的建议。我知道我上面提供的代码只会显示数组 0，但我不知道如何将它与动态 table.

集成

Answer 1

解决方案 1：自定义管道

您可以将 start_time 格式化为 Custom Pipe。

to-twelve-hours-base.pipe.ts

import { Pipe } from '@angular/core';
import moment from "moment";

@Pipe({ name: 'ToTwelveHoursBase' })
export class ToTwelveHoursBasePipe {
  transform(value: string): string {
    return moment(value, 'HH:mm').format('hh:mm A');
  }
}

app.module.ts

import { ToTwelveHoursBasePipe } from './pipes/to-twelve-hours-base.pipe';

@NgModule({
  ...
  declarations: [ ..., ToTwelveHoursBasePipe ]
})
export class AppModule { }

.component.html

<ng-container matColumnDef="start_time">
  <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
  <td class="font-content" mat-cell *matCellDef="let row">{{ row.start_time | ToTwelveHoursBase }}</td>
</ng-container>

Sample Solution 1 on StackBlitz

解决方案 2：使用 rxjs 运算符

或者，rxjs pipe/map 运算符也可以用来格式化 start_time.

data.service.ts

grabTimeContent(): Observable<any> {
    const data = {
      tableTime: [
        {
          start_time: '10:08'
        },
        {
          start_time: '15:25'
        },
        {
          start_time: '16:58'
        },
        {
          start_time: '20:18'
        }
      ]
    };

    return of(data).pipe(
      map(x => {
        return {
          ...x,
          tableTime: x.tableTime.map(obj => {
            return {
              start_time: moment(obj.start_time, 'HH:mm').format('hh:mm A')
            };
          })
        };
      })
    );
  }

.component.html

<ng-container matColumnDef="start_time">
  <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
  <td class="font-content" mat-cell *matCellDef="let row">{{ row.start_time }}</td>
</ng-container>

Sample Solution 2 on StackBlitz

Angular: 将 SQL 24 小时时间格式转换为 12 小时时间格式

Angular: Converting SQL 24 hour time format to 12 hour time format

momentjs

typescript

angular

解决方案 1：自定义管道

解决方案 2：使用 rxjs 运算符