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

送信するたびに、「households」配列に値をプッシュし、フォームを非表示にします。フォームに戻り、フォームを表示します。フォームの値 (totalhouseholds) を変更すると、配列 (households) が正しく表示されます。しかし、値を変更せずに再度送信します。表示された配列は更新されません。アイデアのアドバイスは大歓迎です

4

3 に答える 3

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 が提案するようにオブジェクトを使用することも解決策ですが、typescript を本来の使用方法で使用していないと思います。すべてを Object に抽象化するのではなく、必要に応じて特定の型を使用する必要があります。

于 2016-04-27T06:40:46.433 に答える