Android ng-click does not trigger


#1

Hi everyone! im having a little issue with ionic 2 (2.1.18). The ngclick event does not work with the android build, does not trigger.

my-home.html

    <button  ion-button block (click)="getMovies()">Search</button>

<ion-card *ngFor="let movie of foundmovies" (click)="goToDetails(movie)">
  <ion-grid>
    <ion-row>
      <ion-col width-50><img onerror="this.src='./assets/img/default-movie.png'" src="https://image.tmdb.org/t/p/w500/{{movie.poster_path}}"/></ion-col>
      <ion-col width-50>
        <ion-card-title>
          {{ movie.original_title }}
        </ion-card-title>
        <h2><b>Release Date:</b> </h2>
        <p>{{ movie.release_date }}</p>
        <h2><b>Popularity:</b></h2>
        <p>{{ movie.popularity }}</p>
        <h2><b>Vote:</b></h2>
        <p>{{ movie.vote_average }}</p>
      </ion-col>
    </ion-row>
  </ion-grid>
       
  <ion-card-content>

my-home.ts

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { MovieDB } from ‘…/…/providers/movie-db’;
import { MyDetailsPage } from ‘…/my-details/my-details’;

@Component({
selector: ‘page-my-home’,
templateUrl: ‘my-home.html’,
providers: [ MovieDB ]
})
export class MyHomePage {
public name;
public foundmovies;
public adult;
public pages;
public nextPageint = 2;
constructor(public navCtrl: NavController, public navParams: NavParams, private moviedb: MovieDB) {}

ionViewDidLoad() {

}

getMovies(){
this.moviedb.getMovies(this.name,this.adult).subscribe(
data => {
let temp = data.json();
this.pages = temp.total_pages;
this.nextPageint = 2;
this.foundmovies = temp[‘results’];
},
err => {
console.log(err);

  },
  
  );

}

goToDetails(movie){
this.navCtrl.push(MyDetailsPage,{ movie: movie})
}

nextPage(infiniteScroll){

if(this.nextPageint < this.pages){
  this.moviedb.getNextPage(this.name,this.adult,this.nextPageint).subscribe(
    data => {
      let temp = data.json();
      for(let i = 0; i<temp['results'].length; i++){
        this.foundmovies.push(temp['results'][i]);
      }
      
    },
    err =>{
      console.log(err);
    },
    () =>{
      this.nextPageint++;
      console.log(this.nextPageint);
      infiniteScroll.complete();
    }
  );
  
}else{
  infiniteScroll.complete();
}

}
}


#2

You have two click interactions in your sample. Which one is failing? But deeper still, how do you know it is failing? Have you looked at the console output? Did something else go wrong? Have you added a simple console.log(‘here’) type call before each function to see if it being called and it is other code that is failing?

Does it work with $ ionic serve?


#3

yes in the ionic serve works perfect! but when a got the apk from android build the first button (Search) does nothing… but in the browser works perfect… even in the ionic view works perfect


#4

Does the event not fire at all or isn’t the function performed? I.e. if you log the click inside goToDetails, does your Android build get in there at all?


#5

And let me guess, there is a call to an external service to get your data within that provider?

If so, you are probably encountering Whitelisting issues, that will only surface once you run on a real device.

Ionic View is set up to allow everything to be accessed, thus it works.


#6

You are right im using an external service… i read something about whitelist plugin of cordova… is that the solution?


#7

Most likely. Trace down your code to see where it stops. What does the JavaScript console say? Probably returning 401 or preflight issues.


#8

It was a whitelist problem! i added a cordova whitelist plugin plus a header and now works perfect!! thanks a lot!