日期对象在模板中被视为字符串

时间:2016-03-16 15:20:28

标签: angular angular2-template

我正在尝试使用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);
}

1 个答案:

答案 0 :(得分:3)

我认为您的服务不会返回日期。如果您从HTTP请求中获取日期,则没有本机支持从响应中获取日期,因为JSON格式不提供日期支持。

有关详细信息,请参阅此问题: