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}}

Answer 2

In TypeScript array<3> means you are creating an array of fixed size (3 items in it). If you want to be able to add item, you should use: number[]

model: number[];

Answer 3

You have to decalre your model as your class datatype. instead of writing

model:Array<number>

you should write

model:Data;

The way to propagate values into model is not correct. Instead of doing this:

model = new Data('50', ['10', '20']);

you must do this:

var myArray:Array<number> = new Array;
myArray.push(10,20);
model = new Data(50,myArray)

Using an Object as suggested by @Pankaj Parkar is also a solution, but I feel you are not using typescript the way it should be used. You should be using specific types where needed instead of abstracting everything to Object.