Data binding of objects not working in modular window


#1

Hi guys,

with ionic 2 rc my code worked, but actually after updating to ionic 4 it’s not working anymore.
Although the constructor of the modalPage is executed and all objects/ variables were set before, when loading the HTML file, I get the error _TypeError: Cannot read property ‘value’ of undefined for the object/model.

Please see the simplified example below.
Any idea, why the variable work but objects are not possible to access in this case?

Modal window creation

 this.modal = this.modalCtrl.create(ModalPage);
 this.modal.present().then(() => { ...}

ModalPage.ts file

export class ModalPage {
  value;
  counter;

  constructor(public someProvider...) {
  this.someProvider.getNumber("count").subscribe((data) => {
           this.value= { text: 'hallo' };
           this.counter = 1;

  }

ModalPage HTML File

{{counter}} \\ works
{{value.text}} \\ does not work

#2

Is that really the error? If it is, is value really on the left side of the dot in the template, as opposed to the right side (where text is in your “simplified” code)?


#3

Unfortunately not, variables work fine! Even if I write only {{value}}, I get [object Object] written in the UI. But when I then try to access some properties like in this case text, the error (ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘text’ of undefined) occurs.


#4

Then you have wasted everybody’s time. Next time post actual errors and actual code.

That’s because you have not initialized the surrounding instance variable. I prefer to do so at the point of declaration:

value: Whatever = {};