位置2处的意外文字

Question

在html页面上显示时，我得到了这个错误，我将日期作为一个array.If返回，我希望在将来只显示月份和年份，那么应该做什么呢?现在我想返回整个日期，所以在ngmodel中的p-日历标记中的html页出现了错误，我在ngmodel中显示date2i，其中我是来自p-datalist的索引，我在html页面上得到了错误。

educationform.component.html:298错误:在viewWrappedDebugError (errors.js:42)、callWithDebugContext (services.js:871)、Object.debugCheckAndUpdateView as checkAndUpdateView at ViewRef_.detectChanges (refs.js:508)、Array.forEach (application_ref.js:742)、ApplicationRef.tick (application_ref.js:742)的位置2处出现意外的文字。(application_ref.js:575) at ZoneDelegate.invoke (zone.js?1534930465821:388) at 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'});
 }
}

Answer 1

date2i不是日期对象。您需要它将其转换为日期对象之前的日期(新日期(值)

sampleForm = new FormGroup({
  dateProp: new FormControl(new Date(prop))
});

或者和管道一起使用

<p-calendar
    [showIcon]="true"
    [ngModel]="value | date:'dd/MM/yyyy hh:mm a'"
    (ngModelChange)="onChange()"
    appendTo="body"
></p-calendar>

或者使用primeng日历属性dataType="string“，并且只处理字符串。顺便说一句，我也有同样的毛病，花了几个小时

Answer 2

下面是我的解决方案，当日历从表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:使用ngModelOptions=“{独立:真}”中的p-日历.

不给p日历起一个名字.例如:p日历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>

Answer 3

当这个(ngModel)="date2i“对象初始化赋值为null时，我有相同的情况，它工作得很完美