TypeScript类的Date属性返回一个字符串 [英] TypeScript class Date property returns a string

问题描述

我在typeScript中有一个模型类:

I've a model class in typeScript:

export class Season {
    ID: number;
    Start: Date;
}

这是我的组件:

export class SeasonsComponent{

seasons: Season[];
selectedSeason: Season;

constructor( 
    private configService: ConfigService,
    private notificationsService: NotificationsService,
) { }

ngOnInit(): void {
    this.selectedSeason = new Season();
    this.getSeasons();
}

getSeasons(): void {
    this.configService.getSeasons().subscribe(
        response => {
            this.seasons= response.Data;
            // Data: { Id: 1, Start: '2018-01-01T00:00:00' }
        },
        error => {
            this.notificationsService.show("error", error.error.error, error.error.error_description);
        }
    );
}

selectSeason(season: Season): void {
    this.selectedSeason = season;
}

}

模板:

<p-dataList [value]="seasons">
    <ng-template let-season pTemplate="item">
         <div class="ui-g ui-fluid text-capitalize item-list" (click)="selectSeason(season)" 
                            [class.selected]="season === selectedSeason">
                        <div class="ui-md-3 text-center">
                            <div class="pt-4"><h5>{{ season.ID }}</h5></div>
                        </div>
                        <div class="ui-g-12 ui-md-9">
                            <div class="ui-g">
                                <div class="ui-g-2 ui-sm-6">Start: </div>
                                <div class="ui-g-10 ui-sm-6">{{ season.Start | date: 'MMM d' }}</div>

                            </div>
                        </div>
                    </div>
         </ng-template>
    </p-dataList>
    <form class="bg-white p-4" *ngIf="selectedSeason">
        <div class="row">
            <div class="form-group col">
                <label>Start</label>
                <p-calendar name="startDate" [required]="true"
                      [ngModel]="selectedSeason?.Start"
                      [inline]="true"
                      [style]="{'max-width': '85%'}">
                </p-calendar>
            </div>
        </div>
    </form>

而且显然Start属性的值是一个字符串，这使我遇到了一个需要Date对象作为ngModel的组件的问题.

And apparently the value of the Start property is a string which is causing me problems with a component that requires a Date object as it's ngModel.

如果我添加以下行:

this.selectedSeason.Start = new Date(this.selectedSeason.Start);

我得到:

console.log(typeof this.selectedSeason.Start); // object

我可以事先进行转换，但是使用类型的目的是什么?

I could just cast it beforehand but then what is the purpose of using types?

这与我的课程未完全实例化有什么关系吗?

Does this have something to do with my class not being fully instantiated or something?

谢谢

推荐答案

我喜欢该服务返回转换后的数据，因此您的服务可以像

I like that the service return the data transformed, so your service can be like

getSeasons()
{
    this.httpClient.get(...).map(result=>{
       //Not return the result, instead return result.Data
       //Moreover, we change all the result.Data to return in Start, a Date Object
       return result.Data.map(d=>{
            Id:d.Id,
            Start:New Date(d.Start)
       }
    }
}

然后您的组件订阅就像

this.configService.getSeasons().subscribe(
        response => {
            this.seasons= response;  //<--just response
        },
        error => {
            this.notificationsService.show("error", error.error.error, error.error.error_description);
        }
    );

这篇关于TypeScript类的Date属性返回一个字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！