3

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

0

1 respuesta 1

2

Tu componente tiene varias cosas mal:

export class HomeComponent implements OnInit {
    public videosService: Array<any>; //esta variable no se usa para nada
    public listavideos: any; //no se inicializa
    public videos: video[];


    constructor(private http: HttpClient, videoService: VideosService) {
        //listavideos es undefined, es videoService lo que estás buscando
        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() {
        //deberías hacer la petición aquí, no en el constructor
    }

}

La forma correcta de hacerlo sería algo como:

export class HomeComponent implements OnInit {

    public listavideos: video[];


    constructor(
        private http: HttpClient,
        private videoService: VideosService) { }

    ngOnInit() {
        this.videoService.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);
            }
        );
    }

}
3
  • gracias! esto lo soluciono! debía definir como private el servicio, pensé qué con poner una coma lo tomaría pero al parecer tomaba por defecto public. el 22 feb. 2018 a las 15:35
  • 1
    No te confundas, con public también funcionaría... es cuando no pones nada cuando no funciona. public o private lo que hacen es crear un atributo con el mismo nombre del parámetro dentro de la clase. En Javascript sería el equivalente a constructor(dato) { this.dato=dato;} el 22 feb. 2018 a las 15:40
  • comprendo, muchas gracias! el 22 feb. 2018 a las 15:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.