Angular TypeScript类日期属性返回一个字符串

我在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>

}

模板：

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>

我得到：

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

我可以预先将其转换，但使用类型的目的是什么

这是否与我的类没有完全实例化或其他原因有关

---

谢谢

我喜欢服务返回转换后的数据，这样您的服务就可以

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);
        }
    );

this.configService.getSeasons（）.subscribe(
响应=>{
this.seasures=响应；//{
this.notificationsService.show（“error”，error.error.error，error.error.error\u说明）；
}
);

Season实例是在哪里创建的？您没有发布相关代码，即创建Season实例并设置其Start属性值的代码。请记住，在运行时，不再有TypeScript。它只是JavaScript。JavaScript可以为任何变量赋值。好的，这就是问题所在。我假设this.selectedSeason=season足以确保属性保持我在类中声明的类型。因此，每次选择新“season”时，我都必须实际创建一个对象（使用new？）？不。你必须确保传递给SeleccionalTemporada的季节（应该是一个季节）确实是一个季节。修复错误，不要绕过它。但是因为你不会告诉我们这个对象是在哪里创建和填充的，我们无法告诉你如何最好地修复代码。抱歉。我已经用完整的代码更新了帖子。