6

ネストされたオブジェクトに [(ngModel)] を使用したいのですが、エラーが発生します

Cannot read property 'mxn' of undefined

これらは私のモデルのデータ構造です:

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;

これは company.ts の一部です

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

とHTML

mxnHTMLページでは、次を使用するだけで値を表示できます:

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

ngModelしかし、値を更新してデータベースに送信するために双方向バインディングで使用したい場合は機能しません。

[(ngModel)] = "newCompany.currency.mxn" 上記のエラーが発生します。使用 [(ngModel)] = "newCompany.currency"してもエラーは発生しませんが、値を割り当てることができないため、コードは役に立ちませんmxn。

[(ngModel)] = "newCompany.name"これで問題なく動作し、名前を更新できると言わざるを得ません。

Postman で試してみたところ、バックエンドは正常に動作しました。問題は角度側です。

問題は、データ構造が正しい場合、ネストされたオブジェクトに双方向バインディングを使用するにはどうすればよいかということです。

4

3 に答える 3

2

コンストラクターで通貨フィールドをインスタンス化していないようです。を変更してみてください

currency: Currency;

に

currency = new Currency();

companiesListおそらく（私はここで推測しています）あなたのバックエンドがあなたのためにそれらをインスタンス化するので、それはおそらくあなたと一緒に働いています。そして、あなたnewCompanyが自分で行うと私が想定しているものをインスタンス化すると、行方不明の原因が機能しませんnew Currency()

于 2017-12-07T19:29:36.447 に答える