Zwei-Wege-Bindung - verschachteltes Objekt - eckig - Kann nicht Eigentum von undefined

Question

ich verwenden möge [(ngModel)] für ein verschachteltes Objekt gelesen, aber mir einen Fehler

Cannot read property 'mxn' of undefined

diese schenken sind die Datenstruktur meiner Modelle:

company.model.ts

import Currency from './currency.model'; 

class Company { 
_id: string; 
name: string; 
maxLimit: number; 
source: [string]; 
deliveryMethod: [string]; 
currency: Currency; 
date: Date; 

constructor() { 
    this.name = ''; 
    this.date = new Date(); 
    this.maxLimit = 0; 
    this.source = ['']; 
    this.deliveryMethod = ['']; 
    this.currency.mxn = 0; 
    this.currency.php = 0; 
    } 
} 

export default Company; 

currency.model.ts

class Currency { 
mxn: number; 
php: number; 


constructor() { 
    this.mxn = 0; 
    this.php = 0; 
} 
} 

export default Currency; 

und dies ist ein Teil von company.ts

public newCompany: Company = new Company(); 
companiesList: Company[]; 
editcompanies: Company[] = []; 

und HTML

in HTML-Seite ich in der Lage bin den mxn Wert zeigen, indem sie einfach mit:

<tr class="companies" *ngFor="let company of companiesList"> 
{{company.currency.mxn}} 

aber Wenn ich es mit ngModel Zwei-Wege-Bindung für die Aktualisierung des Werts verwenden und es an die Datenbank senden will, funktioniert es nicht.

[(ngModel)] = "newCompany.currency.mxn" es erzeugt den oben genannten Fehler. Wenn ich [(ngModel)] = "newCompany.currency" verwende, gibt es mir keinen Fehler, aber der Code ist nutzlos, da ich mxn keinen Wert zuweisen kann.

Ich muss sagen, dass es funktioniert gut mit diesem und ich kann den Namen aktualisieren.

das Backend funktioniert gut, als ich es mit Postman versuchte. das Problem ist die winklige Seite.

so ist die Frage, ob meine Datenstruktur korrekt ist, wie kann ich bidirektionale Bindung für das verschachtelte Objekt verwenden?

Answer 1

currency: Currency; 
... 
constructor() { 
    ... 
    this.currency.mxn = 0; 
    this.currency.php = 0; 
} 

mxn und PHP gibt es noch nicht, bis Sie eine Instanz von Currency instanziiert. Die Instanz currency ist null. Es enthält keine Eigenschaften.

currency: Currency; 
... 
constructor() { 
    ... 
    this.currency = new Currency(); // invoke Currency constructor, create mxn and php with value 0, therefore you dont need this.currency.mxn = 0 and same to php 
} 

Answer 2

Eine leichte Veränderung in Ihrem Unternehmen Modell soll genug sein:

class Company { 
 
    _id: string; 
 
    name: string; 
 
    maxLimit: number; 
 
    source: [string]; 
 
    deliveryMethod: [string]; 
 
    currency: Currency = new Currency(); // provide an instance, otherwise this field will be undefined 
 
    date: Date; 
 

 
    constructor() { 
 
     this.name = ''; 
 
     this.date = new Date(); 
 
     this.maxLimit = 0; 
 
     this.source = ['']; 
 
     this.deliveryMethod = ['']; 
 
     this.currency.mxn = 0; 
 
     this.currency.php = 0; 
 
     } 
 
    } 
 

 
export default Company;

Answer 3

Es sieht aus wie Sie nicht das Währungsfeld in Ihrem Konstruktor instanziieren. Versuchen Sie durch das Ändern

currency: Currency; 

zu

currency = new Currency(); 

Es ist wahrscheinlich mit Ihrem companiesList weil wahrscheinlich arbeiten (ich vermute hier) Backend instanziiert sie für Sie. Und wenn Sie instanziieren die newCompany, die ich dir selbst übernehmen Sie es nicht funktioniert Ursache der fehlenden new Currency()