TypeError：无法读取未定义的属性“name”TypeError：无法读取未定义的属性“name”

Question

我正在使用AngularJS和.net核心。一般的想法是使用角度我呈现数据并从.net核心调用WebAPI。提交数据不是问题，因为我目前没有完成发布数据，因为我在发布表格时遇到问题。

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './components/app/app.component'
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { SpareTypeListComponent } from './components/spareType/spare-type-list/spare-type-list.component';
import { SpareTypeSummaryComponent } from './components/spareType/spare-type-summary/spare-type-summary.component';
import { SpareTypeService } from "./components/shared/spare-type.service";
import { SpareTypeFormComponent } from './components/spareType/spare-type-form/spare-type-form.component';



export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent,
        SpareTypeListComponent,
        SpareTypeSummaryComponent,
        SpareTypeFormComponent
    ],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'spares', component: SpareTypeListComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [ SpareTypeService ]
};

备用型form.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { SpareType } from "../../shared/spare-type.type";
import { SpareTypeService } from '../../shared/spare-type.service';

@Component({
    selector: 'spare-form',
    templateUrl: './spare-type-form.component.html'

})

export class SpareTypeFormComponent implements OnInit {

    @Input() spareType: SpareType

    constructor(private spareTypeService: SpareTypeService) { }

    ngOnInit() {

    }

    onSubmit() {

    }
}

备用型form.component.html

<form (ngSubmit)="onSubmit()" #spareTypeForm="ngForm">

        <label for="name">Name:</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="spareType.name" required #name="ngModel" />
        <br />
        <button type="submit" class="btn btn-success btn-lg">Add</button>
</form>

如果我从输入标签中删除[(ngModel)]="spareType.name" required #name="ngModel"表单显示在页面上没有任何问题。 我哪里弄错了？

我遵循了这个例子：https://github.com/Vintharas/angular2-step-by-step-05-forms-and-validation/tree/master/src/app/person-details

他在哪里初始化空对象？

父组件

import { Component, OnInit, Input} from '@angular/core';
import { SpareType } from '../../shared/spare-type.type';
import { SpareTypeService } from "../../shared/spare-type.service";

spare-type-list.component.ts

@Component({
    selector: 'spare-type-list',
    templateUrl: './spare-type-list.component.html',
    providers: [SpareTypeService]

})

export class SpareTypeListComponent implements OnInit {


    @Input() spareType: SpareType;

    spareTypes: SpareType[];

    constructor(private spareTypeService: SpareTypeService ) {

    }

    ngOnInit() {
        this.spareTypeService.getSpareTypes()
            .then(types => this.spareTypes = types);
    }
}

备用型list.component.html

<spare-form></spare-form>
<h1>Spare Types List</h1>
<p *ngIf="!spareTypes">No Spare Types Found.</p>
<spare-type-summary *ngFor="let spareType of spareTypes" [spareType]="spareType"></spare-type-summary>

显示数据库中的数据是有效的，只有表格有问题。

Answer 1

如下所示定义变量 spareType ，当您的对象值为null时，您的视图似乎会呈现，因此无法访问对象name的属性spareType

@Input() spareType: SpareType = new SpareType();

您还可以更新对象 ngOnChange 事件。

ngOnChanges(changes: any) {
    if (changes.spareType != null && changes.spareType.currentValue == null) {
          this.spareType=new SpareType();
    }       
}

注意：正如建议@ AJT_82：＆＃34;在父组件＆＃34;是最好的方法