Проблема с вызовом API с ionic2

Question

Я пытаюсь вызвать API с помощью ionic2. Поставщик данных выглядит так. Служба возвращает массив объектов. Когда я обслуживаю приложение, данные не отображаются в шаблоне HTML. Как я могу исправить эту проблему.

import { Injectable } from '@angular/core'; 
    import { Http } from '@angular/http'; 
    import 'rxjs/add/operator/map'; 


    @Injectable() 
    export class VideoService { 
    videos: any; 


    constructor(public http: Http) { 
    console.log('Hello videoService Provider'); 
    } 

    getVideos(){ 
    this.http.get('http://mizikjams-lorisson.rhcloud.com/api/videos.json') 
    .map(res => res.json()).subscribe(data => { 
    this.videos= data.videos; 
    console.log(this.videos); 
    }); 

    } 


    } 

вот код HTML шаблон

<ion-content class=" mainpage card-background-page "> 
    <ion-list> 
    <ion-item *ngFor="let video of videos"> 
    <ion-avatar item-left> 
    <img src="{{video.image}}"> 
    </ion-avatar> 
    <h2>{{video.title}}</h2> 
    </ion-item> 
    </ion-list> 
    <div class="floatingbtn"> 
    <ion-fab bottom right edge > 
    <button ion-fab color="orange" (click)="search();"><ion-icon name="search"></ion-icon></button> 
    </ion-fab> 
    </div> 
    </ion-content> 

Answer 1

см работает plunker - http://plnkr.co/edit/JtLm3K?p=preview

убедитесь, что вы добавить поставщика к app.module

@NgModule({ 
    imports: [ IonicModule.forRoot(AppComponent) ], 
    declarations: [ AppComponent, HomePage ], 
    entryComponents: [ HomePage ], 
    bootstrap: [ IonicApp ], 
    providers: [VideoService] 
}) 
export class AppModule { } 

поставщик

import { Injectable } from '@angular/core'; 
    import { Http } from '@angular/http'; 
    import 'rxjs/add/operator/map'; 


    @Injectable() 
    export class VideoService { 
    videos: any; 


    constructor(public http: Http) { 
    console.log('Hello videoService Provider'); 
    } 

    getVideos(){ 
    return this.http.get('http://mizikjams-lorisson.rhcloud.com/api/videos.json') 
    .map(res => res.json()); 

    } 


    } 

page1.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { VideoService } from './videoService' 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'app/home.page.html' 
}) 
export class HomePage { 

    appName = 'Ionic App'; 
    videos:any 

    constructor(public navController: NavController, public vs : VideoService) { 

    this.videos = this.vs.getVideos() 
    } 

} 

HTML

<ion-header> 
    <ion-navbar> 
    <ion-title>{{ appName }}</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <ion-list> 
     <ion-item *ngFor="let video of (videos | async)?.videos "> 
     <ion-avatar item-left> 
      <img src="{{video.image}}"> 
     </ion-avatar> 
     <h2>{{video.title}}</h2> 
    </ion-item> 
    </ion-list> 
</ion-content>