0

Estoy haciendo una llamada a la API con la intención de mediante un ngFor en el html, me pinte una serie de datos que vienen en un array (del cuál quiero pintar en el html el "name"). La llamada la hace por lo que veo en el console.log pero no me pinta los datos que quiero, se me queda vacío y no sé el motivo.

service.ts

export class TikService {

  service: any[] = [];

  constructor(private http: HttpClient) {
    this.getServices();
   
   }

   public getServices (){
    const getTypeUrl = environment.servicesURL;

    this.http.get(getTypeUrl)
    .subscribe((data: any) => {
      this.service = data.obj;
      console.log(data);

    });
   }
}

Componente.ts

constructor(
    public tikService: TikService
  ) {
   
  }

  ngOnInit(): void {
    this.tikService.getServices();
  } 

html

<li *ngFor="let servicio of tikService.service">
<button class="btn">{{ servicio.name }}</button>
 </li>

array

data: Array(1)
0: Array(4)
0: {createdAt: '2020-06-09T13:37:14', createdBy: 1, active: true, id: 1, name: 'Servicio1', …}
1: {createdAt: '2020-06-11T12:22:10', createdBy: 4, updatedAt: '2020-07-08T16:50:32', name: 'Servicio2', active: true, …}
2: {createdAt: '2020-06-11T12:23:04', createdBy: 4, updatedAt: '2020-07-08T16:50:41', name: 'Servicio3', active: true, …}
3: {createdAt: '2020-06-23T09:59:49', createdBy: 4, updatedAt: '2020-07-08T16:49:38', name: 'Servicio4', active: true, …}
length: 4

¿Cómo podría resolverlo? Gracias.

4
  • Agrega un ejemplo del contenido de data.obj
    – Lobos
    el 4 may. 2022 a las 13:08
  • Hola. Es un array que saca 4 objetos como por ejemplo: 0: {createdAt: '2020-06-09T13:37:14', createdBy: 1, active: true, id: 1, name: 'Servicio1', …} Y así otros 3 más.
    – Basileia
    el 4 may. 2022 a las 13:28
  • Es mejor si agregas lo que se ve en consola del contenido de data.obj, porque así como lo describes 0:{ ... me hace pensar que es un objeto y no un arreglo.
    – Lobos
    el 4 may. 2022 a las 13:47
  • Hola! He añadido el array en la entrada. Gracias.
    – Basileia
    el 4 may. 2022 a las 14:21

1 respuesta 1

0

Hola debes crear una variable para capturar el observable que retorna el servicio y hay si iterarlo en el *ngFor.

El component.ts:

import { Observable } from 'rxjs';
  .
  . 
  .
export class MyClassComponent {

  public ticketsObs$?: Observable<any[]>;

  constructor(
    public tikService: TikService
  ) {
   
  }

  ngOnInit(): void {
    this.ticketsObs$ = this.tikService.getServices();
  } 
}

El servicio:

public getServices(): Observable<any[]>{

  const getTypeUrl = environment.servicesURL;

  return this.http.get(getTypeUrl);
}

El template:

<li *ngFor="let ticket of ticketsObs$ | async">
  <button class="btn">{{ ticket.name }}</button>
</li>

La idea de los servicio de conexion http a servidor es retornar un Observable que luego se recibe en los componentes. Si usas un .subscribe dentro del Servicio cortas el flujo, si necesitas retornar un elemento especifico en la respuesta y no todo lo que back retorna, lo mejor es filtrar usando .pipe(map(res => return res.parteEspecifica))

2
  • Hola, intento poner lo del observable pero cuando hago el "public ticketObs$=Observable<any>" me sale este error: Property 'ticketsObs' has no initializer and is not definitely assigned in the constructor
    – Basileia
    el 4 may. 2022 a las 14:41
  • Ya edite la respuesta: la creacion del observable queda asi: public ticketsObs$?: Observable<any[]>;
    – Julio Daza
    el 4 may. 2022 a las 14:49

Tu Respuesta

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

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