属性 在 ngModel (Angular 2) 中不工作，错误

Question

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

core.umd.js:3370 EXCEPTION: Cannot read property 'ProductName' of undefinedErrorHandler.handleError @ core.umd.js: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: Cannot read property 'ProductName' of undefined at AppView._View_ProductAddComponent0.detectChangesInternal (ProductAddComponent.ngfactory.js:542) at AppView.detectChanges (core.umd.js:9470) at AppView.detectViewChildrenChanges (core.umd.js:9496) at AppView.detectChangesInternal (core.umd.js:9481) at AppView.detectChanges (core.umd.js:9470) at AppView.detectContentChildrenChanges (core.umd.js:9488) at AppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:469) at AppView.detectChanges (core.umd.js:9470) at AppView.detectViewChildrenChanges (core.umd.js:9496) at 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: Cannot read property 'ProductName' of undefined(…)

我尝试遵循 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(){
    }
}

将class改为

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

    constructor(){}
}