Quiero utilizar servicios y HttpClient
con observables, al usar HttpClient
sin servicio todo funciona muy bien pero al pasarlo como servicio no he podido lograr utilizarlo.
Investigando leí que debo utilizar observables en el servicio para posteriormente en el componente subscribirme y traer la data. NO he logrado traer la respuesta al componente, es importante mencionar que no utilizo http
sino HttpClient
donde ya me llega como Json
(para que no me den respuestas basadas en http
).
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://xxx.xxx.cl/api/v1/video';
public token = 'xxxxxx';
public paginas:number;
constructor(public http: HttpClient) {
}
getVideos(): Observable<any>{
const headers = { 'Authorization': 'bearer xxxxxx' };
const params = { 'page': '1' };
return this.http.get(this.VideosApi, { headers:headers, params });
}
}
Componente ts:
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() {
}
}
HTML componente:
<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:
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