недвижимости не работает в ngModel (Angular2), ошибка

Question

Я пытаюсь создать форму с помощью Angular2, но я со следующей ошибкой:

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

Я пытался следовать Angular2 Getting Start Tutorial, изменение переменные и объекты для того, что мне нужно. Но ошибка продолжает происходить. Что я делаю неправильно? Вот мой код.

Моя модель:

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