如何在Angular中格式化来自数据库的日期

Question

我想知道是否可以对来自数据库的ngFor日期进行过滤/格式化。我在数据库中有日期格式："2017-11-02 12:13:14"，但我只想在我的ngFor表格中显示"2017-11-02"。这可能吗？

<tr *ngFor="let myCar of cars>
            <td>{{myCar.name}}</td>
            <td>{{myCar.registered}}</td> //can I format retrieved date here?
</tr>

我只想知道是否可以去掉时间，只向用户显示日期。我不确定PIPE能否实现。

- Pleasure

---

你可以使用Angular内置的datePipe，也可以构建一个自定义管道来截取时间。 - Roy

数据库中的日期是字符串类型，我认为是这样的。对吗？ - Amir Christian

@很高兴告诉你，你可以使用Angular管道来实现以下代码：<tr *ngFor="let myCar of cars> <td>{{myCar.name}}</td> <td>{{myCar.registered | date: 'yyyy-MM-dd'}}</td></tr> - 77792

@77792，我第一次尝试解决这个问题是使用管道方法，但对我来说不起作用。.slice函数可以正常工作。 - Pleasure

@Pleasure 很高兴听到这个消息!!! - 77792

Answer 1

您可以使用.slice来执行此操作：

<tr *ngFor="let myCar of cars>
    <td>{{myCar.name}}</td>
    <td>{{myCar.registered.slice(0, 10)}}</td>
</tr>

不需要再次格式化

- Amir Christian

---

当你使用Angular管道时的不良实践 - NikNik

slice()函数运行良好。我现在已经在这里阅读了更多关于slice的内容：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice - Pleasure

@NikNik，解决问题容易但不应该用这种方式，我认为在这种情况下并不适用。而目前这种方法运作良好。 - Amir Christian

很高兴听到它能够正常工作，你帮助其他人的做法真的很酷，但是......如果你正在使用Angular，最好使用最佳实践，否则使用原始的JavaScript :) 这只是一个更好地工作的提示。 - NikNik

Answer 2

https://angular.io/api/common/DatePipe

https://stackblitz.com/edit/angular-74cpp1?file=src/app/app.component.ts

<tr *ngFor="let myCar of cars>
            <td>{{myCar.name}}</td>
            <td>{{myCar.registered | date: 'yyyy-MM-dd'}}</td>
</tr>

- Hsuan Lee

Answer 3

你可以使用https://momentjs.com/。

在app.component.ts中设置本地语言。

moment.locale('pt-BR');

创建一个服务（例如 date-utils.service.ts）来格式化日期：

public formatDate(inputDate) { return moment(inputdate).format(); }

然后你可以在你的ts文件中使用它：

this.registered = dateUtilsService.formatDate(registered);

- rikkep