我如何在我的组件中的离子2中获得输入值? [英] How i can get input value within ionic 2 in my Component?
本文介绍了我如何在我的组件中的离子2中获得输入值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将使用 ionic 2
创建一个购物应用程序,在产品详细信息中,我创建了一个步进器,用于增加和减少数量值。
i will create a shopping app using ionic 2
, in products details i've created a stepper for increment and decrement value of quantity.
我的问题 :如何在离子中获取输入值2
在我的组件中?
My question : how i can get the input value within ionic 2
in my Component ?
推荐答案
解决方案:
1 - app / pages / index.html
1- app/pages/index.html
在Angular 2中,你应该在模板中使用 ngModel
。
In Angular 2, you should use ngModel
in the template.
<ion-header>
<ion-navbar primary>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item>
<button lightgray full (click)="incrementQty()">+</button>
<ion-item>
<ion-input type="number" min="1" [value]="qty" [(ngModel)]="qty"></ion-input>
</ion-item>
<button lightgray full (click)="decrementQty()">-</button>
</ion-item>
</ion-content>
2 - app / pages /index.ts
2- app/pages/index.ts
import { Component} from '@angular/core';
import { NavController, Slides} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/titlepage/titlepage.html',
})
export class titlePage {
qty:any;
constructor(private nav: NavController) {
this.qty = 1;
}
// increment product qty
incrementQty() {
console.log(this.qty+1);
this.qty += 1;
}
// decrement product qty
decrementQty() {
if(this.qty-1 < 1 ){
this.qty = 1
console.log('1->'+this.qty);
}else{
this.qty -= 1;
console.log('2->'+this.qty);
}
}
}
这篇关于我如何在我的组件中的离子2中获得输入值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文