import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders,HttpParams } from "@angular/common/http";
import { video, videosgeneral } from '../models/videos';
import { Observable } from 'rxjs/Rx';


@Injectable()
export class VideosService {
  videos: Array<video>;
  videoid: Array<video>;
  listavideos:Array<video>;
  public VideosApi = 'https://rinnolab.vms.grupoz.cl/api/v1/video';
  public token = '59026a6cd7dd4cc7a5517090659b9bf6';
  public paginas:number;

  constructor(public http: HttpClient) {


  }

  getVideos(): Observable<any>{
    const headers = { 'Authorization': 'bearer 59026a6cd7dd4cc7a5517090659b9bf6' };
    const params = { 'page': '1' };
    return this.http.get(this.VideosApi, { headers:headers, params });

  }



}

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams, HttpEventType  } from "@angular/common/http";
import { video } from '../models/videos';
import { VideosService } from '../servicios/videos.service';
import { Observable } from 'rxjs/Rx';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers:[VideosService]
})
export class HomeComponent implements OnInit {
  public videosService:Array<any>;
  public listavideos:any;
  public videos: video[];

  constructor(private http : HttpClient, videoService: VideosService) {
    this.listavideos.getVideos().subscribe(
      data => {

          if(data.code != 200){
              console.log(data);
          }else{
            this.listavideos = data['videos']['data'];
            console.log(data['videos']['data']);
          }

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


  }


  ngOnInit() {



  }


}

<div class="row">
      <div class="col s12 m4 l3" *ngFor="let video of listavideos"  id="{{video.vid}}">
        <div class="video">
          <div class="thumb">
            <div class="hover-efect"></div>
            <small class="time">{{video.duration}}</small>
            <a routerLink="/video"><img [src]="video.thumb" alt=""></a>
          </div>

          <div class="video-info">
            <a routerLink="/" class="title truncate">{{video.name}}</a>
            <a class="channel-name" routerLink="/">Categoria: {{video.category}}<span>
                          <i style="display:none;" class="material-icons">person</i></span></a>
            <span class="views">
              <i class="material-icons">visibility</i>{{video.total_views}} visitas
            </span>
            <span class="date">
              <i class="material-icons">access_time</i>{{video.begins}}
            </span>
          </div>

        </div>
      </div>
    </div>

Error: [object Object]
Stack trace:
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:821:31
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:785:17
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:870:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4941:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:594:25