Свойство не работает в ngModel (Angular 2), ошибка

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

Я попытался следовать руководству по началу работы с 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;
}

попробуй это


person Wesley    schedule 25.10.2016    source источник


Ответы (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(){
    }
}

angular.io/guide/forms#create-the-hero-model- class говорит, что определите атрибут внутри конструктора, и он выдает ошибки, связанные с невозможностью прочитать свойство undefined .. в консоли я не знаю, что не так!

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

    constructor(){}
}
person Renato Souza de Oliveira    schedule 25.10.2016
comment
core.umd.js: 3370 ИСКЛЮЧЕНИЕ: Невозможно прочесть свойство ProductName для undefinedErrorHandler.handleError @ core.umd.js: 3370next @ core.umd.js: 6838schedulerFn @ core.umd.js: 6088SafeSubscriber .__ tryOrscriber.tsub: @ 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.umdIG.js: ошибки .handleError @ core.umd.js: 3375next @ core.umd.js: 6838schedulerFn @ core.umd.js: 6088SafeSubscriber .__ tryOrUnsub @ Subscriber.ts: 238SafeSubscriber.next @ Subscriber.ts: 190Subscriber._next .next @ Subscriber.ts: 95Subject.next @ Subject.ts: 61EventEmitter.emit @ core.umd.js: 6080onError @ core.umd.js: 6303onHandleError @ core.umd.js: 6179ZoneDel egate.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) в Apphanges.detect 9481) в AppView.detectChanges (core.umd.js: 9470) в AppView.detectContentChildrenChanges (core.umd.js: 9488) в AppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js: 469tect. umd.js: 9470) в AppView.detectViewChildrenChanges (core.umd.js: 9496) в AppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js: 86) ErrorHandler.handleError @ core.umd. js: 6838 schedulerFn @ core.umd.js: 6088SafeSubscriber .__ tryOrUnsub @ Subscriber.ts: 238SafeSubscriber.next @ Subscriber.ts: 190Subscriber._next @ Subscriber.ts: 135Subscriber.next @ Subscriber.ts: 95Subject.next: @ Subscriber.ts: 95Subject.next: @ Subscriber.ts: 95Subject.next: @ emit @ core.umd.js: 6080onError @ core.umd.js: 6303onHandleError @ core.umd.js: 6179ZoneDelegate.handleError @ zone.js: 207Zone.runTask @ zone.js: 139drainMicroTaskQueue @ zone.js zone.js: 308 zone.js: 357 TypeError: невозможно прочитать свойство ProductName из undefined (…) - person Rishabh Agrahari; 26.09.2017