Question

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

app.component.html

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

我有一个带有以下代码的person.component.ts

person.component.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
    };
  }

}

person.component.html

    <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}}

person.model.ts

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

app.component.ts

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() {

  }
}

app.module.ts

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 { }

Answer 1

您认为有误，请将Person更改为person：

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

此外，您无需在组件中添加多个属性。您可以直接使用input属性。将组件更改为此：

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() { }
}

Answer 2

简单的错误。 Person应该是person。变量区分大小写。

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

您的工作代码为here

无法读取未定义的属性“名称”-Angular6。所有字段重复错误

2 个答案: