IONIC2/Angular2 ngOnChange 不起作用

Question

我是 Angular2 的新手，我一直在为这个问题而苦苦挣扎一段时间，但在网上找不到解决方案。

[在离子2上！

我想使用 ngOnChanges(( 这样我就可以检测对分区的更改：

埃斯塔多斯.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 和 itemsZon 是 .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更好的方法，请告诉我

谢谢！

Answer 1

首先，请记住始终添加 qoutes，将[(ngModel)]=zonaid更改为[(ngModel)]="zonaid"

无论如何，作为答案，请尝试以下操作：

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

自

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

请记住在代码中创建公共runYourFunction(event) {}。

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

希望有帮助

Answer 2

尝试export class EstadosPage implements OnChanges {

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

Answer 3

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>

在

TS 文件中调用 zonai更改为在下拉更改时执行某些操作

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