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

使用以下模板：主页

<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>,
     ) { }
}

每次提交时，我都会在 "households" 数组中推送一个值并隐藏表单。返回表格显示表格。如果我修改表单值 (totalhouseholds)，我的数组 (households) 就会正确显示。但是我没有修改值就再次提交了；显示的数组未更新。欢迎任何想法建议

Answer 1

我怀疑 model 应该声明为 Object 而不是 Array<number> 因为它有两个属性。

另一件事是，当您尝试执行 this.model.households.push('3'); 技术时，它应该会抛出一个错误，因为 model.households 是 Array<number> 类型（它只允许接受数字）。因为最新版本的 Javascript 不允许用字符串代替 number（如果是打字稿，那么你一定在编译时遇到了这些错误）。我想知道它首先是如何工作的。

要在 HTML 上显示 object 值，您可以使用 json 管道来显示它。

{{model.households | json}}

Answer 2

在 TypeScript array<3> 中意味着您正在创建一个固定大小的数组（其中有 3 个项目）。如果你想能够添加项目，你应该使用：number[]

model: number[];

Answer 3

您必须将模型贴标为 class 数据类型。而不是写

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 的建议使用对象也是一种解决方案，但我觉得您没有按照应有的方式使用打字稿。您应该在需要时使用特定类型，而不是将所有内容抽象为对象。

Angular2 /Ionic2：数据绑定

Angular2 /Ionic2: databinding

ionic2

angular