3

我有一个简单的组件如下：

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），我的数组（households）会正确显示。但是我再次提交而不修改值；显示的数组未更新。欢迎任何想法建议

4

3 回答 3

2

我怀疑model应该将其声明为Object而不是拥有它，Array<number>因为它确实具有两个属性。

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

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

{{model.households | json}}
于 2016-02-15T17:27:03.783 回答
0

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

model: number[];
于 2016-04-26T20:58:42.307 回答
0

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

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。

于 2016-04-27T06:40:46.433 回答