Angular2 /Ionic2:数据库化
Angular2 /Ionic2:数据库化
提问于 2016-02-15 16:11:03
我有一个简单的组件如下：
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>,
) { }
}在每次提交时，我都会在“住户”数组中推送一个值，并隐藏表单。返回到窗体显示该窗体。如果我修改了表单值(总计家庭)，则正确显示“我的数组”(“家庭”)。但是，它再次提交而不修改值；显示的数组没有更新。欢迎任何意见
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-02-15 17:27:03
我怀疑model应该声明为Object，而不是Array<number>，因为它有两个属性。
另一件事是，当您在技术上尝试执行this.model.households.push('3');时，应该抛出一个错误，就像model.households中的Array<number>类型(它只允许接受数字)。因为最新版本的Javascript不允许将字符串替换为number(如果它的类型记录，那么您必须在编译时得到这些错误)。我想知道那是怎么一开始的。
为了在object上显示json值，可以使用json管道来显示它。
{{model.households | json}}Stack Overflow用户
发布于 2016-04-26 20:58:42
在TypeScript中，array<3>意味着要创建一个固定大小的数组(其中有3项)。如果您希望能够添加项，则应使用: number[]
model: number[];Stack Overflow用户
发布于 2016-04-27 06:40:46
您必须将您的模型作为类数据类型来删除。而不是写作
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)使用@ Parkar建议的对象也是一种解决方案，但我认为您没有按照应该使用的方式使用类型标。您应该在需要时使用特定类型，而不是将所有内容抽象为对象。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35413977
复制相关文章
相似问题
腾讯云开发者
