Question

我试图在用户输入特定数字的数字时打开一个模态，但我所拥有的并不像我想要的那样，而是在点击时触发一个模态。

这就是我所做的：

的test.html

<ion-card class="card-space">
  <ion-item>
    <ion-label stacked>Amount</ion-label> <!--I can use floating here but I prefer stacked-->
      <ion-input type="text" placeholder="Input Amount" (itemSelected)="itemClicked($event)">
      </ion-input>
  </ion-item>
</ion-card>

test.ts

import {Component} from '@angular/core';
import {ModalController, NavController, NavParams} from 'ionic-angular';
import {Http} from "@angular/http";
import {CompleteTestProvider, ISearch} from "../../providers/complete-test";
import {CustomerDetailsPage} from "../customer-details/customer-details";


@Component({
  selector: 'page-customer-issues-form',
  templateUrl: 'customer-issues-form.html',
})
export class CustomerIssuesFormPage {

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private http: Http,
              public  completeTestProvider: CompleteTestProvider,
              private _modalCtrl: ModalController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CustomerIssuesFormPage');
  }

  itemClicked(item: ISearch) {
    console.log(item);
    //so open the modal here
    let modal = this._modalCtrl.create(CustomerDetailsPage, {customer:item});
    modal.present();
  }

}

我该如何解决这个问题？我正在使用Ionic 2，Angular 2和Typescript。

Answer 1

如评论所述，每当用户输入一个字符并将ionInput作为参数传递给函数时，您可以使用event来执行函数，您可以获取该值并使用它进行比较。这样做

您的HTML：

<ion-card class="card-space">
  <ion-item>
    <ion-label stacked>Amount</ion-label> <!--I can use floating here but I prefer stacked-->
      <ion-input type="text" placeholder="Input Amount" (ionInput)="itemClicked($event)">
      </ion-input>
  </ion-item>
</ion-card>

你的.TS：

itemClicked(event: any) {
  // GET THE USER INPUT
  let userInput: string = event.target.value;

  // COMPARE THE LENGTH WITH THE AMOUNT YOU WANT, I'LL USE 10
  if(userInput.length == 10){
    let modal = this._modalCtrl.create(CustomerDetailsPage, {customer:item});
    modal.present(); 
  }
}

这样就可以与你想要的长度进行比较并打开模态。

希望这有帮助。

Answer 2

使用（input）=＆＃34; itemClicked（$ event）＆＃34;而不是使用（itemSelected）= 然后你可以使用$ event.target.value在每次更改时获取值。然后，当它是您想要的长度或值时，打开模态。

在Ionic 2 Angular 2中输入总位数时打开一个模态怎么样？

2 个答案: