我正在尝试使用Angular2日期管道格式化日期。我把这个类作为我的对象的模型:
export class Match {
Id: number;
MatchDate: Date;
constructor(
id: number,
matchDate: Date
) {
this.Id = id;
this.MatchDate = matchDate;
}
}
我将Match对象提取到我的Component:
import {Component, OnInit} from 'angular2/core';
import {Match} from '../core/models/match';
import {MatchService} from '../core/services/match.service';
@Component({
selector: 'home',
templateUrl: './app/components/home.html',
directives: [],
providers:[MatchService]
})
export class Home implements OnInit {
nextMatch: Match;
lastMatch: Match;
errorMessage: string;
constructor(
private _matchService: MatchService
) { }
getNextMatch() {
this._matchService.getNextMatch()
.subscribe(
nextMatch => this.nextMatch = nextMatch,
error => this.errorMessage = <any>error
);
}
getLastMatch() {
this._matchService.getLastMatch()
.subscribe(
lastMatch => this.lastMatch = lastMatch,
error => this.errorMessage = <any>error
);
}
ngOnInit() {
this.getNextMatch();
this.getLastMatch();
}
}
在我的模板中,我尝试显示MatchDate:
<div class="row">
<div class="col-md-6 col-xs-12">
<div *ngIf="lastMatch" class="card">
<div class="card__content">
<p>{{lastMatch.MatchDate | date:"short"}}</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div *ngIf="nextMatch" class="card">
<div class="card__content">
<p>{{nextMatch.MatchDate}}</p>
</div>
</div>
</div>
</div>
使用{{nextMatch.MatchDate}}
时,我得到了正确的日期,但没有按照我想要的格式化。如果我使用{{lastMatch.MatchDate | date:"short"}}
,我会收到错误消息:
管道'DatePipe'
的参数'2016-02-01T18:30:00'无效
MatchDate不应该是Date对象,而不是字符串吗?
编辑:
这是我的MatchService的一部分:
getNextMatch() {
return this.http.get(this._apiUrl + '/next')
.map(res => <Match>res.json())
.catch(this.handleError);
}
答案 0 :(得分:3)
我认为您的服务不会返回日期。如果您从HTTP请求中获取日期,则没有本机支持从响应中获取日期,因为JSON格式不提供日期支持。
有关详细信息,请参阅此问题: