How to instanziate Modell Angular 2

Question

Ich erstelle eine sehr einfache Angular 2-Anwendung mit dem Zweck der CRUD-Produkte. Ich habe eine CreateProductComponent, aber ich habe Probleme beim Instanziieren des Modells, das ich in meiner Ansicht verwenden möchte. Ich erhalte diese Fehlermeldung:

Dies ist mein Code:

create-product.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

import { Product } from '../product' 
import { ProductService } from '../product.service' 

@Component({ 
    moduleId: module.id, 
    selector: 'app-create-product', 
    templateUrl: 'create-product.html', 
    styleUrls: ['create-product.css'], 
}) 
export class CreateProductComponent { 

    model: new Product(1,'2',1); <- error on this line 

    constructor(private productService: ProductService) { } 

    addProduct() {   

     //this.productService.addProduct(this.product); 
    } 
} 

product.ts

export class Product { 

    constructor(
     public ID: number, 
     public Name: string, 
     public Price: number 
    ) { } 
} 

Idealer Ich möchte ein leeres Produkt oder ein Produkt mit defaul Werten erstellen, so dass, wenn Ein Formular in der Ansicht wird mit den Produktdaten gefüllt, diese Daten werden an das Produkt weitergegeben. Weiß jemand, wie man das löst?

Answer 1

Das Problem ist, dass du bist Syntax ein wenig ausgeschaltet ist. Sie sollten einen der folgenden Werte verwenden:

Dadurch wird eine Eigenschaft mit einem instanziierten Wert Product erstellt.

export class CreateProductComponent { 

    // Define model, declare type, and assign/instantiate. 
    model = new Product(1,'2',1); 

    constructor(private productService: ProductService) { } 
} 

Oder diese, die die Eigenschaft model als eine Art von Product definiert, ihn aber nicht einen Wert zuweisen. Stattdessen wird es im Konstruktor zugewiesen.

export class CreateProductComponent { 

    // Define model, declare type 
    model: Product; 

    constructor(private productService: ProductService) { 
     this.model = new Product(1,'2',1); 
    } 
} 

Alternativ können Sie sogar noch deutlicher sein, auch wenn es nicht erforderlich ist, kann als die Typen leicht zu entnehmen.

export class CreateProductComponent { 

    // Define model, declare type, and assign/instantiate. 
    model: Product = new Product(1,'2',1); 

    constructor(private productService: ProductService) { } 
} 

Es gibt einige große Dokumentation here sowie eine REPL playground, die ich mit sehr empfehlen.

Answer 2

Es sollte

model = new Product(1,'2',1); 

Answer 3

Sie erstellen ein Feld in CreateProductComponent. Verwenden Sie ‚=‘ anstelle von ‚:‘ wie

model = new Product(1,'2',1); <- error on this line

Answer 4

In Typoskript Terminologie ‚:‘ bedeutet, dass Sie einen Typ für eine Variable deklarieren Sie definiert haben.

'=' bedeutet, dass Sie Ihrer Variablen einen Wert zuweisen.

Aber hier, was Sie getan haben, ist stattdessen einen Wert zuweisen Sie versuchen, einen Wert zu erklären (die nach Syntax nicht korrekt ist)

so können Sie entweder direkt einen Wert wie

model = new Product(1,'2',1); 

zuweisen

oder sonst können Sie zunächst einen Typ für Ihre Variable deklarieren und dann einen Wert in einem dieser beiden Möglichkeiten zuweisen (ich persönlich bevorzuge diese Art und Weise)

model: Product = new Product(1,'2',1); 

oder

model: Product; 
model = new Product(1,'2',1);