0

I have the following code working in browser, but upon testing on simulator or device the list view of cards does not immediately appear once location has been obtained. If I tap (only works on device) on the search then the list will suddenly show.

What if anything am I doing wrong?

import {Component, Pipe, PipeTransform} from '@angular/core';
import {DomSanitizationService} from '@angular/platform-browser';
import {NavController, Platform} from 'ionic-angular';
import {MovieService} from '../services/MovieService';
import {MovieInfo} from '../movie-info/movie-info';

@Pipe({name: 'safe'})
export class Safe {
  constructor(private sanitizer:DomSanitizationService){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
  }
}

@Component({
    templateUrl: 'build/pages/movie-list/movie-list.html',
    providers: [MovieService],
    pipes: [Safe]
})

export class MovieListPage {

    movies: Array<any>;

    constructor(private navController: NavController, private movieService: MovieService, private platform: Platform) {
        this.loadGeoData();
    }

    searchMovieDB(event, key) {
        if(event.target.value.length > 2) {
            this.movieService.searchMovies(event.target.value).subscribe(
                data => {
                    this.movies = data.results;
                    console.log(data);
                },
                err => {
                    console.log(err);
                },
                () => console.log('Movie Search Complete')
            );
        }
    }

    itemTapped(event, movie) {
        console.log(movie);
        this.navController.push(MovieInfo, {
            movie: movie
        });
    }

    loadGeoData() {

        this.platform.ready().then(() => {

            let options = {timeout: 10000, enableHighAccuracy: true};

              navigator.geolocation.getCurrentPosition(

                  (position) => {
                     this.movieService.searchMovies(position.coords.latitude+','+position.coords.longitude).subscribe(
                        data => {
                            this.movies = data.results;
                            console.log(data);
                        },
                        err => {
                            console.log(err);
                        },
                        () => console.log('Movie Search Complete')
                    );
                  },

                  (error) => {
                      console.log(error);
                  }, options

              );

        });

    }
}

With the following template:

<ion-header>
    <ion-navbar>
        <ion-title>
            Movie List
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="home" padding>
    <ion-item>
        <ion-input type="text" placeholder="Search a movie..." (input)="searchMovieDB($event, searchKey)"></ion-input>
    </ion-item>

    <ion-list>
        <ion-card *ngFor="let movie of movies" (click)="itemTapped($event, movie)">
            <img src="{{movie.image}}"/>
            <ion-card-content>
                <ion-card-title>
                    {{movie.title}}
                </ion-card-title>
                <div [innerHTML]="movie.excerpt"></div>
            </ion-card-content>
        </ion-card>
    </ion-list>
</ion-content>

Also, currently have lots of: "WARNING: sanitizing HTML stripped some content." I tried using the "safe" pipe in the code above but that results in an exception error on build in the browser_adapter.js file.

Ian Tearle
  • 342
  • 1
  • 5
  • 14
  • Incidentally I have fixed the HTML sanitizing warning by using the correct usage of bypassSecurityTrustHtml - this has not solved the lack of showing content when the app opens. – Ian Tearle Jul 22 '16 at 15:53
  • I think the issue is because Angular knows nothing about what you do in the `loadGeoData()` method, and just check for changes when an async event occurs (like the tap event you mention). Have you tried to run that method inside a *zone* like you can see in [this answer](http://stackoverflow.com/questions/38174997/angular-2-ionic-2-detect-if-an-object-was-modified/38180523#38180523)? – sebaferreras Jul 22 '16 at 16:10
  • Sorry, currently getting undefined is not an object (evaluating '_this.ngZone.run')! just trying to resolve that before I can give you an answer... – Ian Tearle Jul 22 '16 at 17:30
  • Are you importing it `import { ..., NgZone } from '@angular/core';`, declaring it in the constructor `constructor(private ngZone : NgZone,...){}` and using it like this `this.ngZone.run(() => { /* call your method() */ });` – sebaferreras Jul 23 '16 at 07:20
  • strangely, I got this working correctly by removing the ```}, (error) => { console.log(error); }, options``` from the getcurrentposition function. Though I cannot explain why this would make any difference?! – Ian Tearle Aug 08 '16 at 10:54

0 Answers0