Angular2/Ionic2:

Question

привязки данных У меня есть простой компонент, как следующие:

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

со следующим шаблоном: 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> 

это мой data.ts:

export class Data { 

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

В каждом представлении я нажимаю значение в массиве «домохозяйства» и скрываю форму. Обратно в форму отобразится форма. Если я изменяю значение формы (totalhouseholds), мой массив (домашние хозяйства) отображается правильно. Но я снова представляю его без изменения значения; отображаемый массив не обновляется. Любая идея советы приветствуются

Answer 1

Я подозреваю, что model должен быть объявлен как Object вместо того, чтобы его Array<number> как он есть два свойства.

Другое дело, когда вы пытаетесь сделать this.model.households.push('3'); технически это должно быть ошибка, как в model.households имеет тип Array<number> (что позволит только принять номер). Поскольку последняя версия Javascript не позволяет помещать строку вместо number (если ее машинописный текст, то вы должны получить эту ошибку во время компиляции). Мне интересно, как это получилось на первом месте.

Для отображения на карте значения object, для его отображения можно использовать трубу json.

{{model.households | json}} 

Answer 2

В машинописном массиве < 3> означает, что вы создаете массив фиксированного размера (3 шт в нем). Если вы хотите, чтобы иметь возможность добавить элемент, вы должны использовать: номер []

model: number[]; 

Answer 3

Вы должны decalre модели в качестве класса типа данных. вместо того, чтобы писать

model:Array<number> 

вы должны написать

model:Data; 

Путь к размножать значения в модели не является правильным. Вместо того, чтобы сделать это:

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

вы должны сделать это:

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

Использование объекта как предложено @Pankaj Parkar также является решением, но я чувствую, что вы не используете машинопись, как это должен быть использован. Вы должны использовать конкретные типы там, где это необходимо, вместо абстрагирования всего на Object.