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.
data.obj
data.obj
, porque así como lo describes0:{ ...
me hace pensar que es un objeto y no un arreglo.