Ii 如何在我的组件中获取离子 2 内的输入值? [英] How Ii can get input value within ionic 2 in my Component?

问题描述

我将使用 ionic 2 创建一个购物应用.在产品详细信息中，我创建了一个用于增加和减少数量值的步进器.

I will create a shopping app using ionic 2. In the products details I have created a stepper for increment and decrement value of quantity.

如何在组件的 ionic 2 中获取输入值?

How can I get the input value within ionic 2 in my Component?

推荐答案

解决方案:

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

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

这篇关于Ii 如何在我的组件中获取离子 2 内的输入值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！