I'm new to Angular2 and I've been struggling for a while with this problem and have found no solution to it online.
[on ionic2!]
I want to use ngOnChanges() so i can detect changes to 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>
idespecie and itemsZon are parts of .json files
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 {}
Everything is happening in the same component (ionic page).
My goal is just to be able to run a method whenever zonaid changes. If you think there is a better way than goin through ngOnChanges, pls let me know
Thanks!
First, remember to always add qoutes, change [(ngModel)]=zonaid
to [(ngModel)]="zonaid"
Anyway, as an answer try this:
Change <ion-select *ngIf="isTrue2" [(ngModel)]=zonaid>
to
<ion-select *ngIf="isTrue2" [ngModel]="zonaid"
(ngModelChange)="runYourFunction($event)">
Remember to create a public runYourFunction(event) {}
in your code.
With this you'll be data binding from the component to the view, and whenever the view changes, you'll run the function runYourFunction
.
Hope that helps