格式化从可观察数组返回的日期

Question

我正在尝试将从休息服务返回的日期值格式化为可观察量。创建的日期和修改日期在我的 HTML 中呈现为/Date(1298937600000(/，我希望它们格式化为 dd/MM/yyyy。我看过一些类似的帖子，但似乎没有一篇为我指明正确的方向，或者超出了我目前对 Angular 2 的理解。

我正在调用我的 API，如下所示：

getUnLocationsList(): Observable<UnLocations[]> {
    var url = "http://localhost:5000/api/unlocations"
    return this._http.get(url)
        .map((response: Response) => <UnLocations[]>response.json().unLocations)
        .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}

然后，从我的 Angular 2 组件中，我调用 getUnLocationsList(( 函数，如下所示：

export class StandingDataComponent implements OnInit {
 pageTitle: string = 'UnLocation Codes';
 unLocationsList: UnLocations[];
 constructor(private _staticDataService: StaticDataService) { }
 ngOnInit() {
 this.getUnLocationsList();
 }
 getUnLocationsList() {
  this._staticDataService.getUnLocationsList().subscribe(unLocationsList => this.unLocationsList = unLocationsList),
  err => console.error(err),
  () => console.log("finished loading unlocations"); 

}

最后我使用然后使用简单的 *ngFor 来显示数据

<tbody *ngFor="let unLocation of unLocationsList | paginate: {itemsPerPage: 30, currentPage:page, id: '1'}; let i = index">
    <td style="width:100px"> {{unLocation.code}} </td>
    <td style="width:200px"> {{unLocation.name}} </td>        
    <td style="width:200px">{{unLocation.isActive}}</td>
    <td style="width:200px">{{unLocation.createdOn }}</td>
     <td style="width:200px">{{unLocation.modifiedOn }}</td>
  </tbody>

Answer 1

一种选择是使用 DatePipe 转换绑定的输出。这将使您的数据保持不变，这可能是可取的。它位于 CommonModule 中，因此您不必导入任何内容。

像这样：

<td style="width:200px">{{unLocation.createdOn | date:'dd/MM/y' }}</td>

否则，您可以将其转换为某处的 Date 对象(遍历所有对象(并使用它：

new Date(1298937600000);
// Tue Mar 01 2011 01:00:00 GMT+0100 (W. Europe Standard Time)

Answer 2

终于开始工作了。管道似乎不起作用，但是，迭代列表中的每个项目(如建议的那样(就可以解决问题。这是我的代码

private extractData(res: Response) {
    var data = res.json().unLocations || [];
    data.forEach((d) => {
        d.createdOn = new Date(parseInt(d.createdOn.substr(6)));
        if (d.modifiedOn != null)
            d.modifiedOn = new Date(parseInt(d.modifiedOn.substr(6)));
    });
    return data;
}