TypeError: Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined

Question

我正在使用 AngularJS 和 .net 核心。一般的想法是 angular 我正在呈现数据并从 .net 核心调用 WebAPI。呈现数据不是问题，对于 post 目前我没有完成数据，因为我在显示我应该 post.

的表格时遇到问题

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";

备用型-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所建议："do it in the parent component"是最好的方法

TypeError: Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined

TypeError: Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined

angular

angular-forms