Ionic 2列表视图未显示设备

Question

我在浏览器中使用以下代码，但是在模拟器或设备上进行测试后，一旦获得位置，就不会立即显示卡的列表视图。如果我在搜索中点击（仅适用于设备），则列表将突然显示。

如果我做错了怎么办？

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

              );

        });

    }
}

使用以下模板：

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

另外，目前有很多： “警告：清理HTML会剥夺一些内容。” 我尝试在上面的代码中使用“安全”管道，但这导致在browser_adapter.js文件中构建时出现异常错误。