ionic2的API调用问题

我正在尝试使用ionic2调用API，数据提供程序如下所示。该服务返回一个对象数组。当我为应用程序提供服务时，数据未显示在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>

{{video.title}

参见工作插销-

确保将提供商添加到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());

  }


  }

第1.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

{{appName}}
{{video.title}

看起来您阅读了“视频”并将其保存在服务中。您有使用此服务的组件吗？这个html代码，是否附加到任何组件/页面上？感谢您的及时回复，我修改了代码，仍然没有在html模板中显示数据。但是当我console.log它时，我看到控制台中的所有对象。但是它没有出现在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>