IONIC2/Angular2 ngOnChangeが機能しません

Question

私はAngular2が新しく、この問題でしばらくの間苦労しており、オンラインで解決策が見つかっていません。 [ionic2に！]

私はngOnChanges（）を使用したいので、私はzonaidへの変更を検出することができます：

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> 

式およびitemsZonはp .jsonファイルの芸術

estados.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') 
} 
} 

app.module.ts

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に行くよりも良い方法があると思うなら、plsに知らせてください。

ありがとう！

Answer 1

まず、答えはこれを試してみて、とにかく[(ngModel)]=zonaid

[(ngModel)]="zonaid"に変更し、常にqoutesを追加することを忘れないでください：

変更<ion-select *ngIf="isTrue2" [(ngModel)]=zonaid>

<ion-select *ngIf="isTrue2" [ngModel]="zonaid" (ngModelChange)="runYourFunction($event)">

にすることを忘れないでください一般公開するあなたのコードの3210。

これにより、コンポーネントからビューへのデータバインディングとなり、ビューが変更されたときには、関数runYourFunctionが実行されます。

Answer 2

がngOnChangesが必要とされていないexport class EstadosPage implements OnChanges {

https://angular.io/api/core/OnChanges

Answer 3

を試すことができます希望。 Angularは自動的に選択した値をバインディングで更新します。 Dark Neuronの回答はうまくいくが、コードは[ngModel]="zonaid"から[(ngModel)]="zonaid"に変更する必要がある。あなたも見つけることができますworking version of ionic dropdown here

あなたのHTMLはこのように見えます。TSファイルの呼び出しで

<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> 

私は一目で見るどのようなドロップダウン変化に

zonaiChanged(){ 
alert(this.zonaid); 
}