Question

我正在尝试使用Angular 2创建表单，但我遇到以下错误：

core.umd.js：3370 EXCEPTION：无法读取undefinedErrorHandler.handleError @ core.umd.js的属性'ProductName'：3370next @ core.umd.js：6838schedulerFn @ core.umd.js：6088SafeSubscriber .__ tryOrUnsub @ Subscriber .ts：238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @core.umd.js:6080onError @ core.umd .js：6303onHandleError @ core.umd.js：6179ZoneDelegate.handleError @ zone.js：207Zone.runTask @ zone.js：139drainMicroTaskQueue @ zone.js：368ZoneTask.invoke @ zone.js：308 core.umd.js：3375 ORIGINAL STACKTRACE：ErrorHandler.handleError @ core.umd.js：3375next @ core.umd.js：6838schedulerFn @core.umd.js:6088SafeSubscriber .__ tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber。 ts：190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6080onError @ core.umd.js:6303onHandleError @ core.umd。 js：6179ZoneDelegate.handleError @ zone.js：207Zone.runTask @ zone.js：139drainMicroTaskQueue @ zone.js：368ZoneTask.invoke @ zone.js：308 core.umd.js：3376 TypeError：无法读取未定义的属性“ProductName” 在AppView._View_ProductAddComponent0.detectChangesInternal（ProductAddComponent.ngfactory.js：542）在AppView.detectChanges（core.umd.js：9470）在AppView.detectViewChildrenChanges（core.umd.js：9496）在AppView.detectChangesInternal（core.umd.js：9481）在AppView.detectChanges（core.umd.js：9470）在AppView.detectContentChildrenChanges（core.umd.js：9488）在AppView._View_AppComponent0.detectChangesInternal（AppComponent.ngfactory.js：469）在AppView.detectChanges（core.umd.js：9470）在AppView.detectViewChildrenChanges（core.umd.js：9496）在AppView._View_AppComponent_Host0.detectChangesInternal（AppComponent_Host.ngfactory.js：86）ErrorHandler.handleError @ core.umd.js：3376next @ core.umd.js：6838schedulerFn @core.umd.js：6088SafeSubscriber .__ tryOrUnsub @ Subscriber.ts:238SafeSubscriber .next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @core.umd.js:6080onError @ core.umd.js：6303onHandleError @ core.umd.js：6179ZoneDelegate.handleError @ zone.js：207Zone.runTask @ zone.js：139drainMicroTaskQueue @ zone.js：368ZoneTask.invoke @ zone.js：308 zone.js：357 TypeError：无法读取未定义（...）
的属性“ProductName”

我尝试按照Angular 2入门教程，根据需要更改变量和对象。但错误仍在继续。我究竟做错了什么？这是我的代码。

我的模特：

export class Product {
    constructor(
        public ProductName: string,
        public ProductDescription: string) { }
}

我的组件：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Product } from '../models/product.model'

@Component({
    templateUrl: 'templates/Product_Add.html'
})

export class ProductAddComponent {

    public title: string = "Add Product"
    public product: Product;

    product_register(){
    }
}

我的模板：

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{ title }}</h3>
    </div>
    <form #form="ngForm" (ngSubmit)="product_register(form.value)">
        <div class="panel-body">
            <div class="row">
                <div class="form-group col-md-6">
                    <label>Name</label>
                    <input type="text" class="form-control" tabindex="1" maxlength="40" [(ngModel)]="product.ProductName"/>
                </div>
                <div class="form-group col-md-12">
                    <label>Description</label>
                    <input type="text" class="form-control" tabindex="2" maxlength="200" [(ngModel)]="product.ProductDescription"/>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <a class="btn btn-primary" type="submit">Save</a>&nbsp;
            <a class="btn btn-default" type="reset">Reset</a>&nbsp;
        </div>
    </form>
</div>

我尝试将我的模型更改为：

export interface Product {
    ProductName: string;
    ProductDescription;
}

和：

export class Product {
    public ProductName: string;
    public ProductDescription: string;
}

但出现同样的错误，感谢

Answer 1

试试这个

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Product } from '../models/product.model'

@Component({
    templateUrl: 'templates/Product_Add.html'
})

export class ProductAddComponent {

    public title: string = "Add Product"

    private product:Product = new Product();
    //public product: Product;

    product_register(){
    }
}

将课程更改为

export class Product {
    public ProductName: string;
    public ProductDescription: string;

    constructor(){}
}

属性在ngModel（Angular 2）中不起作用，错误

1 个答案: