我在html页面上显示时遇到此错误，我将日期作为数组返回。如果我想只显示将来的月份和年份，那应该怎么办？现在我想返回整个日期，所以我正在显示date2 [i]的ngmodel中的p-calendar标记中的html页面上的HTML错误，其中i是来自p-datalist的索引 html页面出现错误
educationform.component.html：298错误错误：意外的文字位于 位置2 在viewWrappedDebugError（errors.js：42） 在callWithDebugContext（services.js：871） 在Object.debugCheckAndUpdateView [作为checkAndUpdateView]（services.js：385） 在ViewRef_.detectChanges（refs.js：508） 在评估时（application_ref.js：742） 在Array.forEach（） 在ApplicationRef.tick（application_ref.js：742） 在评估时（application_ref.js：575） 在ZoneDelegate.invoke（zone.js？1534930465821：388） 在Object.onInvoke（ng_zone.js：594） View_EducationFormComponent_1 @ educationform.component.html：298 educationform.component.html：298错误上下文DebugContext _
<p-calendar [(ngModel)]="date2[i]" formControlName="startdate" [monthNavigator]="true" [yearNavigator]="true" yearRange="1950:2040"
[showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar>
Person.js
{
"EducationDegrees":[{
"EducationId":1001,
"InstituteName":"SPIT",
"EducationType":"Professional",
"Degree":"Mca",
"University":"Mumbai",
"MarksObtain":90,
"OutOf":100,
"Percentage":90,
"PassingYear":"2016",
"Stream":"Computer Science",
"Grade":"A",
"CourseDuration":3,
"StartDate":"2005-05-05",
"ExpectedEndDate":"4/2018",
"ActualEndDate":"4/2018"
}],
}
education.component.html
<form [formGroup]="education" (ngSubmit)="onSubmit(education.value)">
<p-dataList [value]="eduqualifications" [paginator]="true" [rows]="1">
<p-header>
Education qualifications
</p-header>
<ng-template let-eduqualification let-i="index" pTemplate="item">
<div class="ui-fluid">
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Start Date</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-calendar [(ngModel)]="date2[i]" formControlName="startdate" [monthNavigator]="true" [yearNavigator]="true" yearRange="1950:2040"
[showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar>
<span style="margin-left:45px">{{date2|date}}</span>
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!education.controls['startdate'].valid&&education.controls['startdate'].dirty">
<i class="fa fa-close"></i>
Start date is required
</div>
</div>
</div>
<div class="ui-inputgroup">
<div class="ui-md-8 ui-md-offset-4">
<button pButton type="submit" label="Submit" [disabled]="!education.valid"></button>
<button pButton type="button" (click)="count()" label="Cancel"></button>
</div>
</div>
</div>
</ng-template>
</p-dataList>
</form>
education.component.ts
import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';
import { Message } from 'primeng/components/common/api';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { PersonListService,Person, EducationDegree} from './person-list.service';
/**
* This class represents the lazy loaded PersonComponent.
*/
@Component({
moduleId: module.id,
selector: 'sd-educationform',
templateUrl: 'educationform.component.html',
styleUrls: ['educationform.component.css']
})
export class EducationFormComponent implements OnInit {
date2:Array<Date>=[];
EduTypes: SelectItem[];
EduType: string = '';
Universitys: SelectItem[];
University: string = '';
Streams: SelectItem[];
Stream: string = '';
Grades: SelectItem[];
Grade: string = '';
CourseDurations: SelectItem[];
CourseDuration: string = '';
Degrees: SelectItem[];
Degree: string = '';
SubStreams: SelectItem[];
SubStream: string = '';
msgs: Message[] = [];
education: FormGroup;
submitted: boolean;
errorMessage: any;
eduqualifications: EducationDegree[];
constructor(private fb: FormBuilder,public personListService:PersonListService) { }
ngOnInit() {
this.getperson();
this.education = this.fb.group({
'institutename': new FormControl('', Validators.required),
'educationtype': new FormControl('', Validators.required),
'university': new FormControl('', Validators.required),
'degree': new FormControl('', Validators.required),
'marksobtain': new FormControl('', Validators.required),
'outof': new FormControl('', Validators.required),
'percentage': new FormControl('', Validators.required),
'passingyear': new FormControl('', Validators.required),
'stream': new FormControl('', Validators.required),
'grade': new FormControl('', Validators.required),
'courseduration': new FormControl('', Validators.required),
'startdate': new FormControl('', Validators.required)
}
);
this.EduTypes = [
{label: 'Basic', value: 'Basic'},
{label: 'technical', value: 'technical'},
{label: 'Professional', value: 'Professional'}
];
this.Universitys = [
{label: 'Mumbai', value: 'Mumbai'},
{label: 'Pune', value: 'Pune'},
{label: 'Kolhapur', value: 'Kolhapur'}
];
this.Degrees = [
{label: 'BE', value: 'BE'},
{label: 'Bsc', value: 'Bsc'},
{label: 'Bcom', value: 'Bcom'}
];
this.Streams = [
{label: 'Science', value: 'Science'},
{label: 'Commerce', value: 'Commerce'},
{label: 'Arts', value: 'Arts'}
];
this.SubStreams = [
{label: 'Computer Science', value: 'Computer Science'},
{label: 'Finance', value: 'Finance'},
{label: 'Mass Media', value: 'Mass Media'}
];
this.Grades = [
{label: 'A', value: 'A'},
{label: 'B', value: 'B'},
{label: 'C', value: 'C'},
{label: 'D', value: 'D'},
{label: 'E', value: 'E'},
{label: 'F', value: 'F'}
];
this.CourseDurations = [
{label: '1', value: '1'},
{label: '2', value: '2'},
{label: '3', value: '3'},
{label: '4', value: '4'},
{label: '5', value: '5'},
{label: '6', value: '6'},
{label: '7', value: '7'},
{label: '8', value: '8'},
{label: '9', value: '9'},
{label: '10', value: '10'}
];
}
getperson(){
this.personListService.getEducation()
.subscribe(
resp =>{
this.eduqualifications = resp.EducationDegrees
var i;
for(i=0;i<this.eduqualifications.length;i++)
{
this.date2[i]=this.eduqualifications[i].StartDate
}
console.log(this.date2)
console.log(this.eduqualifications.length)
//resp => this.addresses = resp.Addresses,
error => this.errorMessage = <any>error
}
);
}
onSubmit(value: string) {
this.submitted = true;
this.msgs = [];
this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
}
}
答案 0 :(得分：1)
date2 [i]不是Date对象。您需要将其强制转换为Date对象（新的Date（value）），或使用primeng日历属性dataType =“ string”并仅使用字符串。顺便说一句，我遇到了同样的错误并花了几个小时
答案 1 :(得分：0)
这是我使用primeNg的p日历的解决方案，当日历插入表中的列时。
在打字稿中：将日期（来自数据库）转换为新的日期（打字稿）
//Asumming that "myList" is the list from database
//Browse "myList"
for (let i = 0; i < this.myList.length; i++) {
//If myDate is not NULL
if (this.myList[i].myDate != null) {
//Cast into new Date
this.myList[i].myDate = new Date(this.myList[i].myDate);
}
}
在HTML中：使用p日历中的 [ngModelOptions] =“ {standalone：true}” 。
不要在p日历上命名。例如：p-calendar name =“ myCalendarName”
<p-table [value]="myList">
<ng-template pTemplate="header">
<tr>
<th>Id</th>
<th>My Date</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-myVar>
<tr>
<td>{{myVar.id}}</td>
<td>
<p-calendar [(ngModel)]="myVar.myDate"
[ngModelOptions]="{standalone: true}"
dateFormat="dd/mm/yy">
</p-calendar>
</td>
</tr>
</ng-template>
</p-table>