6

我想将 [(ngModel)] 用于嵌套对象，但给了我一个错误

Cannot read property 'mxn' of undefined

这些是我的模型的数据结构：

公司.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;

货币模型.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

在 HTML 页面中，我可以mxn通过使用来显示值：

<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

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

mxn 和 php 在您实例化Currency. 实例currency为空。它不包含任何属性。

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
}
于 2017-12-07T19:58:03.037 回答
2

对公司模型稍作改动就足够了：

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;

于 2017-12-07T19:22:35.657 回答
2

看起来您没有在构造函数中实例化货币字段。尝试通过更改

currency: Currency;

至

currency = new Currency();

它可能与您合作，companiesList因为可能（我在这里猜）您的后端为您实例化它们。当你实例化newCompany我假设你自己做的事情时，这不是失踪的原因new Currency()

于 2017-12-07T19:29:36.447 回答