位置 2 的意外文字答案

【问题标题】：Unexpected literal at position 2位置 2 的意外文字
【发布时间】：2018-08-22 11:54:20
【问题描述】：

在 html 页面上显示时出现此错误，我将日期作为数组返回。如果我想在未来只显示月份和年份，那么应该怎么做？现在我想返回整个日期，所以有ngmodel 中 p-calendar 标记中的 html 页面上的错误，我在其中显示 date2[i]，其中 i 是来自 p-datalist 的索引我在 html 页面出现错误

educationform.component.html:298 ERROR 错误：意外的文字在位置 2 在 viewWrappedDebugError (errors.js:42) 在 callWithDebugContext (services.js:871) 在 Object.debugCheckAndUpdateView [as checkAndUpdateView] (services.js:385) 在 ViewRef_.detectChanges (refs.js:508) 在 eval (application_ref.js:742) 在 Array.forEach () 在 ApplicationRef.tick (application_ref.js:742) 在 eval (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'});
 }
}

【问题讨论】：

您在与 formControlName 相同的表单字段上使用 ngModel 并检查日期格式是否相同您需要为您的 ngModel 变量分配一个日期，而不是字符串值，请参见此链接-- stackoverflow.com/questions/50038773/…

标签： angular

【解决方案1】：

date2[i] 不是 Date 对象。 您需要在此之前将其转换为 Date 对象 ( new Date(value)

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" 并仅使用字符串。顺便说一句，我遇到了同样的错误并花了几个小时

【讨论】：

谢谢。这是我的情况。我刚刚将值转换为 Date 并且它起作用了。

【解决方案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 中：在 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>

【讨论】：

不是这里的问题。问题是，服务器日期以字符串形式出现在角度组件中，而 p-calendar 将其作为 Date 对象接受。您可以使用 dataType="string" 属性更改它，但这也将用于设置 ngModel。

【解决方案3】：

当这个 [(ngModel)]="date2[i]" 对象初始化分配它为空时，我有同样的情况，它工作得很好

【讨论】：