angular 2 访问在 html 模板中提交的接口总是给出错误答案

【问题标题】：angular 2 accessing interface filed in html template always gives errorangular 2 访问在 html 模板中提交的接口总是给出错误
【发布时间】：2018-02-27 06:09:43
【问题描述】：

export interface Candidate {
  name: string;
  surname: string;
  gender: boolean;
  dateOfBirth: Date;
  placeOfBirth: string;
  originRegion: string;
  originDivision: string;
  originSubDivision: string;
  employmentSituation: string;
  typeHandicap: string;
  nationality: string;
  cardID: string;
  cardIDIssueDate: string;
  language1: string;
  language2: string;
  MaritalStatus: string;
  numberOfChildren: number;
  specialityDiploma: number;
  seriesDiploma: string;
  avgDiploma: string;
  diplomaObtainYear: string;
  degreeDiploma: string;
  obtainingInstitution: string;
  examCenter: string;
  depositPlace: string;
  optionOfTraining: string;
  admissionMode: string;
  cycle: string;
  department: string;
  option: string;
  session: string;
  residenceCity: string;
  tel1: string;
  tel2: string;
  email: string;
  bp: string;
  fax: string;
  address: string
  practicedSport: string;
  othersActivities: string;
  dateFirstRegistration: Date;
  dateModification: Date;
  dateValidation: Date;
  orderNumber: number;
  dateForDeposit: number;
  isValid: boolean;
  periodModification: number;
  //users_id;
}

registration.component.html
 <div class="innerElt">
                    <input type="text" name="name" placeholder="name" [(ngModel)]="candidate.name" (click)="updatenameLabel('name' )" (focusout)="updatenameLabel(''); updateprogressbar(1)"  required >
                  </div>
registration.component.ts

import { Candidate } from "../candidate.interface";
export class RegistrationComponent implements OnInit {
...
candidate: Candidate;

ngOnInit() {}
...
}

当我运行它时，我总是遇到错误：

错误类型错误：无法读取未定义的属性“名称” 在 Object.View_RegistrationComponent_1.co [作为 updateDirectives] (RegistrationComponent.html:23) 在 Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806) 在 checkAndUpdateView (core.es5.js:12144) 在 callViewAction (core.es5.js:12507) 在 execEmbeddedViewsAction (core.es5.js:12465) 在 checkAndUpdateView (core.es5.js:12145) 在 callViewAction (core.es5.js:12507) 在 execComponentViewsAction (core.es5.js:12439) 在 checkAndUpdateView (core.es5.js:12150) 在 callViewAction (core.es5.js:12507)

【问题讨论】：

有什么想法吗？谢谢...
因为变量candidate 从未被初始化。 candidate = { .... } 会帮助你

标签： angular interface typeerror

【解决方案1】：

非常感谢Zissouu

当我做类似的事情时它会起作用：

ngOnInit() {
this.candidate = {name:"",surname:"",gender:false,dateOfBirth:new Date("February 4, 2016 10:13:00"),placeOfBirth:"",originRegion:"",originDivision:"",originSubDivision:"",
                  employmentSituation:"",typeHandicap:"",nationality:"",cardID:"",cardIDIssueDate:"",language1:"",language2:"",maritalStatus:"",
                  numberOfChildren:0,specialityDiploma:"",seriesDiploma:"",avgDiploma:"",diplomaObtainYear:"",degreeDiploma:"",obtainingInstitution:"",
                  examCenter:"",depositPlace:"",optionOfTraining:"",admissionMode:"",cycle:"",department:"",option:"",session:"",residenceCity:"",tel1:"",tel2:"",
                  email:"",bp:"",fax:"",address:"",practicedSport:"",othersActivities:"",dateFirstRegistration:new Date("February 4, 2016 10:13:00"),dateModification:new Date("February 4, 2016 10:13:00"),dateValidation:new Date("February 4, 2016 10:13:00"),
                  orderNumber:0,dateForDeposit:0,isValid:false,periodModification:0};
                  ...}

【讨论】：