API-Aufruf Problem mit ionic2

Question

Ich versuche, eine API mit ionic2 aufzurufen, der Datenanbieter sieht wie folgt aus. Der Dienst gibt ein Array von Objekt zurück. Wenn ich die App diene, werden die Daten nicht in der HTML-Vorlage angezeigt. Wie kann ich dieses Problem beheben?

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); 
    }); 

    } 


    } 

hier ist die HTML-Template-Code

<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

siehe Arbeits Plunker - http://plnkr.co/edit/JtLm3K?p=preview

stellen Sie sicher, den Anbieter der app.module

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

Anbieter

hinzufügen

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>