Question

我是Angular2的新手，我已经在这个问题上挣扎了一段时间，并且在网上找不到任何解决方案。

[on ionic2！]

我想使用ngOnChanges（），以便我可以检测到对 zonaid 的更改：

estados.html：

for

idespecie 和 itemsZon 是.json文件的一部分

estados.ts

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

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

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

我的目标只是在 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将自动使用绑定更新所选值。 Dark Neuron答案可行，但代码需要从[ngModel]="zonaid"更改为[(ngModel)]="zonaid"。您还可以找到我的working version of ionic dropdown here

您的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文件中调用zonaiChanged在下拉列表更改中执行某些操作

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

IONIC2 / Angular2 ngOnChange不起作用

3 个答案: