двусторонняя привязка - вложенный объект - угловой - невозможно прочитать свойство неопределенного

Я хочу использовать [(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;

валюта.модель.тс

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. проблема угловая сторона.

поэтому вопрос в том, верна ли моя структура данных, как я могу использовать двустороннюю привязку для вложенного объекта?


angular two-way-binding nest-nested-object
person Milad    schedule 07.12.2017    source источник
comment
разве вы не должны сначала создать экземпляр элемента валюты в конструкторе класса компании?   -  person Jota.Toledo    schedule 07.12.2017
comment
Спасибо, вы все были правы. он работал, просто создавая экземпляр валюты.   -  person Milad    schedule 07.12.2017

Ответы (3)


arrow_upward
3
arrow_downward 

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
}
person Haifeng Zhang    schedule 07.12.2017

arrow_upward
2
arrow_downward

Небольшого изменения в модели вашей компании должно быть достаточно:

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;

person Armen Vardanyan    schedule 07.12.2017

arrow_upward
2
arrow_downward

Похоже, вы не создаете экземпляр поля валюты в своем конструкторе. Попробуйте, изменив

currency: Currency;

to

currency = new Currency();

Это, вероятно, работает с вашим companiesList, потому что, вероятно (я здесь предполагаю), ваш бэкэнд создает их для вас. И когда вы создаете экземпляр newCompany, что, я полагаю, вы делаете сами, это не работает из-за отсутствия new Currency()

person SebOlens    schedule 07.12.2017