Question

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

#include <unistd.h>
main()
{
    char *args[] = {(char*)"/bin/ls", (char*)"-r", (char*)"-t", (char*)"-l", (char*) 0 };
    execv("/bin/ls", args);
}

使用以下模板：主页

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

这是我的data.ts：

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

在每次提交时，我在“household”数组中输入一个值并隐藏表单。返回表单显示表单。如果我修改表单值（totalhouseholds），我的数组（家庭）将正确显示。但是我在没有修改价值的情况下再次提交;显示的数组未更新。欢迎任何想法建议

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数组中＆lt; 3＆gt;表示您正在创建一个固定大小的数组（其中包含3个项目）。如果您希望能够添加项目，则应使用：number []

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。

Angular2 / Ionic2：数据绑定

3 个答案: