angular - 如何在ionic2中使用事件onChange

标签 angular ionic2

基本上,我正在尝试制作一个注册表单,其中包含一些下拉列表。我想在其上应用“(change)”事件,每当值发生变化时都会触发一个函数,或者我们可以说从下拉列表中选择值,并基于此我将动态分配下一个字段,但这个事件是在文本字段上工作正常时不在下拉菜单上工作。 有人可以帮我解决这个问题吗?

示例代码:

home.html -->

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>

<form [formGroup]="myForm">   
    <ion-item>
        <ion-label>Dropdown1 :</ion-label>
        <ion-select formControlName="dd" (ionChange)='f()'  #dd>
         <ion-option value='1'>A</ion-option>
            <ion-option value='2'>B</ion-option>
            <ion-option value='3'>C</ion-option>
            <ion-option value='4'>D</ion-option>
        </ion-select>
    </ion-item>

     <ion-item>
    <ion-label>Dropdown2 :</ion-label>
    <ion-select>
     <ion-option value='1'>E</ion-option>
        <ion-option value='2'>F</ion-option>
        <ion-option value='3'>G</ion-option>
        <ion-option value='4'>H</ion-option>
    </ion-select>
</ion-item>

</form> 
</ion-content>

主页.ts -->

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  function f(){
  alert('Value Changed!');
  alert(this.myForm.dd);

  }

}

最佳答案

你可以使用ngModel

<ion-select ngModel (ngModelChange)='f()' name="xxx">

我不确定是否需要 ngModel 部分才能应用 ngModel。您可以尝试将其删除,看看它是否仍然有效。

三似乎也是一个ionChange事件

<ion-select (ionChange)='f()' name="xxx">

http://ionicframework.com/docs/v2/api/components/select/Select/

关于angular - 如何在ionic2中使用事件onChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40100451/

相关文章:

Angular Material 步进器在每次点击时动态添加新的步骤项目

javascript - 使用 ng-dygraphs 时如何从底层 dygraphs 中获取 isZoomed ?

javascript - Ionic 和 Angular 2 - 拒绝应用来自 'http://localhost:8100/build/main.css' 的样式,因为它的 MIME 类型 ('text/html' 不受支持

angularjs - 我如何在 Ionic 2 中使用自定义字体 (ttf-File)?

Angular 中的 Angular Material mat-select 动态数据绑定(bind)

javascript - ionic 条件无线变化

android - 迁移 firebase 帐户

javascript - Angular2 - TypeScript 到 JavaScript ES6 语法 - ng2-translate

Angular 2 - 无法从路由器获取网址