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，这是一个很大的帮助，但我在将它集成到动态材料表中时遇到了一些麻烦。因为据我了解，它只能在 typescript 中使用，不像 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，但我不知道如何将它与动态表集成。

Answer 1

解决方案 1：自定义管道

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

到十二小时-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