Angular 无法读取属性'；名称'；未定义的-角度6。错误在所有字段中重复

当我执行下面的代码时，标题中出现了错误。我知道这是一个非常微小的错误，但无法在任何其他线程中找到解决方案。我正在自学，需要你的帮助

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

app.component.html

<app-person [person]="Person"></app-person>

    <form #frm="ngForm" novalidate>
      <fieldset>
        <legend>Registration:</legend>
        <div class="form-field">
          Name:
          <input type="text" [(ngModel)]="person.name" name="name">

          <br>
        </div>

        <div class="form-field">
          Email:
          <input type="email" [(ngModel)]="person.email" name="email"> {{email}}
          <br>
        </div>

        <div class="form-field">
          Date of birth:
          <input type="date" [(ngModel)]="person.dateOFBirth" name="dateOFBirth"> {{dateOfBirth}}
        </div>
      </fieldset>

      <p>
        <button class="btn btn-success">Register</button>
      </p>
      <pre>{{person|json}}</pre>

    </form>
  {{frm.value|json}}

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

person.component.html

<app-person [person]="Person"></app-person>

    <form #frm="ngForm" novalidate>
      <fieldset>
        <legend>Registration:</legend>
        <div class="form-field">
          Name:
          <input type="text" [(ngModel)]="person.name" name="name">

          <br>
        </div>

        <div class="form-field">
          Email:
          <input type="email" [(ngModel)]="person.email" name="email"> {{email}}
          <br>
        </div>

        <div class="form-field">
          Date of birth:
          <input type="date" [(ngModel)]="person.dateOFBirth" name="dateOFBirth"> {{dateOfBirth}}
        </div>
      </fieldset>

      <p>
        <button class="btn btn-success">Register</button>
      </p>
      <pre>{{person|json}}</pre>

    </form>
  {{frm.value|json}}

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

应用程序组件.ts

import { Component, OnInit, Input } from '@angular/core';
import { Person } from './person.model';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {
  person: any
  @Input('person') personObj: Person;

  constructor() { }

  ngOnInit() {
    this.person = {
        // **Error is pointing this code here**  
         name: this.personObj.name,
         email: this.personObj.email,
         dateOFBirth: this.personObj.dateOFBirth
    };
  }

}

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

import { Component } from '@angular/core';
import { Person } from './person/person.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'formsDemo';

  person: Person;



  constructor() {
    this.person = new Person();
    this.person.name = "Sample";
    this.person.email = "email";
    this.person.dateOFBirth = new Date("1988-08-01");

  }



  createPerson() {

  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PersonComponent } from './person/person.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PersonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<app-person [person]="person"></app-person>

应用程序模块.ts

import { Component, OnInit, Input } from '@angular/core';
import { Person } from './person.model';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {
  person: any
  @Input('person') personObj: Person;

  constructor() { }

  ngOnInit() {
    this.person = {
        // **Error is pointing this code here**  
         name: this.personObj.name,
         email: this.personObj.email,
         dateOFBirth: this.personObj.dateOFBirth
    };
  }

}

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

import { Component } from '@angular/core';
import { Person } from './person/person.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'formsDemo';

  person: Person;



  constructor() {
    this.person = new Person();
    this.person.name = "Sample";
    this.person.email = "email";
    this.person.dateOFBirth = new Date("1988-08-01");

  }



  createPerson() {

  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PersonComponent } from './person/person.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PersonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<app-person [person]="person"></app-person>

---

您的观点有错误，请将

Person

更改为

Person

：

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

import { Component, OnInit, Input } from '@angular/core';
import { Person } from './person.model';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {

  @Input() person: Person;

  constructor() { }

  ngOnInit() { }
}

---

您的观点有错误，请将

Person

更改为

Person

：

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

import { Component, OnInit, Input } from '@angular/core';
import { Person } from './person.model';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {

  @Input() person: Person;

  constructor() { }

  ngOnInit() { }
}

---

简单的错误<代码>人应该是

人

。变量区分大小写

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

---

简单的错误<代码>人

应该是

人

。变量区分大小写

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

---

无需在ngOnInit（）中进行分配。在我的回答中可以看到，ngOnInit（）是空的。正如您所说，当从输入装饰器中删除“person”时，错误会重复。我无法理解这里缺少了什么。实际上，这是我一步一步遵循的教程。本教程工作正常，但不适用于我。在您的视图中，更改人际关系，请参阅更新的答案是。现在它工作正常了。谢谢但我还是像教程中那样做了。非常感谢你的指导。万分感谢：-）无需在ngOnInit（）中进行作业。在我的回答中可以看到，ngOnInit（）是空的。正如您所说，当从输入装饰器中删除“person”时，错误会重复。我无法理解这里缺少了什么。实际上，这是我一步一步遵循的教程。本教程工作正常，但不适用于我。在您的视图中，更改人际关系，请参阅更新的答案是。现在它工作正常了。谢谢但我还是像教程中那样做了。非常感谢你的指导。百万谢谢：-）
export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}