IONIC2/Angular2 ngOnChange 不起作用

Posted 2023-02-22

【中文标题】IONIC2/Angular2 ngOnChange 不起作用

【英文标题】：IONIC2/Angular2 ngOnChange doesn't work

【发布时间】：2018-04-29 04:54:36

【问题描述】：

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

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 更好的方法，请告诉我

谢谢！

【问题讨论】：

我第一眼看到的——你的类没有正确实现接口。定义类时使用“implements”关键字。例如：“类 MyComponent 实现 OnInit”。然后所有的接口都应该像你期望的那样工作。

编译完成后接口丢失。他们只协助（在打字稿中）编写更易于理解的代码，这是唯一的好处。

@plvice 谢谢你的回答，问题仍然存在

【参考方案1】：

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

无论如何，作为答案试试这个：

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

到

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

记得在你的代码中创建一个公开的runYourFunction(event) 。

有了这个，你将数据从组件绑定到视图，每当视图发生变化时，你将运行函数runYourFunction。

希望有帮助

【讨论】：

感谢您的回答。尽管如此， runYourFunction(event) console.log('runYourFunction ran');当我选择其中一个选项时，不会打印到控制台。我也按照您的建议更新了 html。

【参考方案2】：

试试export class EstadosPage implements OnChanges

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

【参考方案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);

【讨论】：

您的 ionic 下拉菜单版本帮助很大，dhanyawad bhaiya

很高兴它有帮助:)