IONIC2/Angular2 ngOnChange不'；行不通

我是Angular2的新手，我已经为这个问题挣扎了一段时间，但在网上找不到解决办法

[在ionic2！上]

我想使用ngOnChanges（）以便检测到对分区的更改：

estados.html:

<ion-item>
       <ion-label color="branco">Zonas</ion-label>


              <ion-select *ngIf="isTrue2" [(ngModel)]=zonaid>
                 <ion-option value={{bicho.zonas}} *ngFor="let bicho of idespecie">
                    {{bicho.zonas}}
                 </ion-option>
             </ion-select>


              <ion-select *ngIf="!isTrue2" [(ngModel)]="zonaid">
                 <ion-option value={{item.id}} *ngFor="let item of itemsZon" >
                    {{item.codigo}}
                 </ion-option>

              </ion-select>
     </ion-item>

应用程序模块.ts

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IpmaBivService} from '../../app/services/ipmabiv.service'
import { Http } from '@angular/http';

@Component({
  selector: 'page-estados',
  templateUrl: 'estados.html'
})
export class EstadosPage {
   itemsZon: any;
   itemsEsp: any;
   zonaEscolhida: any;

   @Input()
   zonaid: string;


   idzona: '';
   idespecie: any[];

   isTrue1:boolean = false;
   isTrue2:boolean = false;
   constructor(public navCtrl: NavController, private ipmaBivService:IpmaBivService) {
  }
  ngOnChanges(changes: SimpleChanges){
     console.log('ngOnChanges ran');
     if(this.zonaid != ''){
        this.isTrue1 = true;
        this.getJsonZonas(this.zonaid);
     }
     if(this.especie != ''){
        this.isTrue2 = true;
        this.getJsonEspecies(this.especie);
     }
 }

}
  ngOnInit(){
     this.getDataZonas('zonas')
     this.getDataEspecies('especies')
   //   this.getData('especies')
 }
 }

    import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule, JsonpModule } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { EstadosPage } from '../pages/estados/estados';
import { OutrosPage } from '../pages/estados/outros';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    EstadosPage,
    OutrosPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    JsonpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    OutrosPage,
    EstadosPage

  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

一切都发生在同一个组件中（离子页面）

我的目标就是能够在zonaid发生变化时运行一个方法。如果你认为有一个更好的方法比通过ngOnChanges，请让我知道

---

谢谢

首先，记住始终添加qoutes，将

[（ngModel）]=zonaid更改为
[（ngModel）]=“zonaid”

无论如何，作为回答，请尝试以下方法：

更改

到


记住在代码中创建一个公共
runYourFunction（event）{}

这样，您就可以将数据从组件绑定到视图，并且每当视图发生更改时，您都可以运行函数
runYourFunction

希望这有帮助首先，记住总是添加qoutes，将zonaid更改为zonaid

无论如何，作为回答，请尝试以下方法：

更改

到


记住在代码中创建一个公共
runYourFunction（event）{}

这样，您就可以将数据从组件绑定到视图，并且每当视图发生更改时，您都可以运行函数
runYourFunction

希望对您有所帮助
尝试
导出类EstadosPage实现OnChanges{

try
export类EstadosPage实现OnChanges{

不需要更改。Angular将自动使用绑定更新所选值。暗神经元回答将起作用，但代码需要从
[ngModel]=“zonaid”
更改为
[（ngModel）]=“zonaid”
。您还可以找到我的

您的HTML应该如下所示

<ion-item>
       <ion-label color="branco">Zonas</ion-label>
              <ion-select *ngIf="isTrue2" [(ngModel)]="zonaid" (ngModelChange)="zonaiChanged()">
                 <ion-option value={{bicho.zonas}} *ngFor="let bicho of idespecie">
                    {{bicho.zonas}}
                 </ion-option>
             </ion-select>


              <ion-select *ngIf="!isTrue2" [(ngModel)]="zonaid" (ngModelChange)="zonaiChanged()">
                 <ion-option value={{item.id}} *ngFor="let item of itemsZon" >
                    {{item.codigo}}
                 </ion-option>

              </ion-select>
     </ion-item>

ngOnChanges不是必需的。Angular将自动使用绑定更新所选值。暗神经元应答将起作用，但代码需要从
[ngModel]=“zonaid”
更改为
[（ngModel）]=“zonaid”
。您还可以找到我的

您的HTML应该如下所示

<ion-item>
       <ion-label color="branco">Zonas</ion-label>
              <ion-select *ngIf="isTrue2" [(ngModel)]="zonaid" (ngModelChange)="zonaiChanged()">
                 <ion-option value={{bicho.zonas}} *ngFor="let bicho of idespecie">
                    {{bicho.zonas}}
                 </ion-option>
             </ion-select>


              <ion-select *ngIf="!isTrue2" [(ngModel)]="zonaid" (ngModelChange)="zonaiChanged()">
                 <ion-option value={{item.id}} *ngFor="let item of itemsZon" >
                    {{item.codigo}}
                 </ion-option>

              </ion-select>
     </ion-item>

我第一眼看到的是-您的类没有正确实现接口。在定义类时使用'implements'关键字。例如：“class MyComponent implements OnInit”。然后所有接口都应该按照您的预期工作。编译完成后，接口将丢失。它们只会有帮助（在typescript中）在更易于理解的代码中，这是唯一的好处。@谢谢您的回答，但问题仍然存在——我一眼就看出——您的类没有正确实现接口。定义类时请使用“implements”关键字。例如：“class MyComponent implements OnInit”。然后，所有接口都应按预期工作。编译完成后，接口将丢失。它们只会帮助（在typescript中）编写更易于理解的代码，这是唯一的好处。@plvice感谢您的回答，问题仍然存在谢谢您的回答。不过，runYourFunction（event）{console.log（'runYourFunction run'）；}当我选择其中一个选项时，不会打印到控制台。我也已按照您的建议更新了html。谢谢您的回答。不过，runYourFunction（event）{console.log（'runYourFunction run'）；}当我选择其中一个选项时，不会打印到控制台。我也按照您的建议更新了html。您的ionic下拉列表版本帮助很大，dhanyawad Bhaiyaglayd它帮助了：）您的ionic下拉列表版本帮助很大，dhanyawad Bhaiyaglayd它帮助了：）