如何在ionic2中使用事件onChange答案

【问题标题】：how to use event onChange in ionic2如何在ionic2中使用事件onChange
【发布时间】：2016-10-18 05:47:09
【问题描述】：

基本上，我正在尝试制作一个注册表单，其中有一些下拉列表。而且我想在其上应用“（更改）”事件，该事件将在值发生更改时触发一个函数，或者我们可以说从该下拉列表中选择值并基于此我将动态分配下一个字段，但此事件是无法在下拉列表中正常使用文本字段。有人可以帮我解决这个问题吗？

示例代码：

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>

home.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);

  }

}

【问题讨论】：

请将代码添加到您的问题中，展示您尝试完成的任务、尝试的内容以及失败的地方。
当我从下拉列表中选择任何值时，我想触发一个函数。使用该功能，我想根据从上一个下拉列表中选择的值为下一个下拉列表分配值。

标签： angular ionic2

【解决方案1】：

你可以使用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/

【讨论】：

非常感谢。 (ionChange) 将完成这项工作。
正如我之前提到的，我需要使用上述代码的选定值，但它不能正常工作。你能提供一些关于这方面的指导吗
你试过(ionChange)="f($event)"和f(event) { console.log(event);}吗？

【解决方案2】：

您可以在 ion-option 上使用 ionSelect，这将在每次选择项目时触发。

Ionic docs ion-option

<ion-select>
    <ion-option (ionSelect)="optionSelected($event)" *ngFor="let item of items$ | async" [value]="item.id">{{item.name}}</ion-option>
</ion-select>

【讨论】：

我可能遗漏了一些东西，但出于我的目的，在 ion-option 处使用 ionSelect 而不是在 ion-select 处调用 ionChange 允许我从 ngFor 迭代器发送一个值。那成功了。谢谢@chriscooley