Angular2 /Ionic2: databinding

Question

I have a simple component as follow:

import {Page} from 'ionic-framework/ionic';
import {Component} from 'angular2/core';
import {Data} from './data';

@Page({
            selector: "main-page",
            templateUrl: 'build/pages/main/main.html'
})

export class MainPage 
{
    submitted: number;
    model: Array<number>;

    constructor(){
       this.submitted = false;
    }
     model = new Data('50', ['10', '20']);
      onSubmit()
    {
        this.model.households.push('3');
    }

    backToForm()
    {
        this.submitted = false;
    }
}

with the following template: MainPage

<ion-content padding class="getting-started" >

      <h1>Random selection of houses generator</h1>
      <div [hidden]='submitted'>
        <form (ngSubmit)="onSubmit()" #dataForm="ngForm">
            <ion-list>
              <ion-item>
                <ion-label floating>Number of houses in the village</ion-label>
                <ion-input 
                      type="number"
                      required
                      [(ngModel)]="model.totalhousehold"
                      ngControl = "totalhousehold"
                    ></ion-input>
              </ion-item>
            </ion-list>
            <button 
                    secondary
                    [disabled]="!dataForm.form.valid"
                    >Generate random selection!</button>
        </form>
      </div>

      <div [hidden]='!submitted'>
          villages: {{ model.totalhousehold }}

          Array: {{ model.households }}


          <button (click)=backToForm()>
              back to form
          </button>
      </div>

</ion-content>

this is my data.ts:

export class Data {

    constructor(
        public  totalhousehold:      number,
        public households: Array<number>,
     ) { }
}

On each submit I push a value in my "households" array and hide the form. Back to Form display the form. If I modify the form value (totalhouseholds), my Array (households) is displayed correctly. But it I submit again without modifying the value; the displayed array is not updated. Any idea advice be welcome

Answer 1

I suspect that model should be declared as Object instead of having it Array<number> as it do have two properties.

Other thing is when you try to do this.model.households.push('3'); technically it should been throw an error as in model.households is of type Array<number>(which will only allow to accept number). Because latest version of Javascript it won't allow to put string in place of number(If its typescript then you must have get those error at compile time). I'm wondering how that got worked in first place.

For showing object value on HTML, you could use json pipe to show it.

{{model.households | json}}