Estoy empezando con Angular y quería hacer una cosa pero no sé como. El problema es este: supongamos una base de datos en la que tengo una tabla de categorias de etiquetas y otra tabla de etiquetas con un campo que relaciona la etiqueta con su categoría. El objetivo es pasar a la vista un objeto sobre el que pueda iterar con un *ngFor para mostrar las categorías de etiquetas, así como las etiquetas de cada una de estas categorías.
Lo primero que hago es obtener las categorías de posts y lo hago a través de un servicio:
getCategories(){
this._filtroService.getCategoriasEtiquetas().subscribe(
response => {
// GUARDO LAS CATEGORÍAS EN UNA VARIABLE
this.categorias = response;
// LLAMO AL MÉTODO QUE METE LAS CATEGORÍAS EN UN ARRAY
this.metoCategorias();
},
error => {
console.log(error);
}
);
}
Esto me devuelve las categorías así:
[{
"id": 2,
"nombre": "Cateogoría 1",
"created_at": "2020-07-13T17:36:49.000000Z",
"updated_at": "2020-07-13T17:36:37.000000Z"
},
{
"id": 3,
"nombre": "Cateogoría 2",
"created_at": "2020-07-13T15:38:41.000000Z",
"updated_at": "2020-07-13T15:38:41.000000Z"
},
{
"id": 4,
"nombre": "Cateogoría 3",
"created_at": "2020-07-13T17:42:47.000000Z",
"updated_at": "2020-07-13T15:42:47.000000Z"
}]
Hasta aquí todo bien, ya que puedo mostrar en la vista las categorías con un ngFor y así lo hago. La cosa es que ahora quiero mostrar los posts dentro de cada categoría, así que se me ha ocurrido iterar por las categorías obtenidas y en cada iteración llamar a un servicio que me dé las etiquetas de esa categoría:
metoCategorias(){
for (let i = 0; i < this.categorias.length; i ++) {
// PASO LA ID DE LA CATEGORÍA A UN MÉTODO QUE LLAMA A UN SERVICIO QUE ME DA LAS ETIQUETAS DE LA CATEGORÍA
var etiquetas = this.getEtiquetas(this.categorias[i]['id']);
var arrayCategorias = {};
arrayCategorias['id'] = this.categorias[i]['id'];
arrayCategorias['nombre'] = this.categorias[i]['nombre'];
// AQUÍ GUARDARÍA LAS ETIQUETAS DE ESTA CATEGORÍA Y LAS MOSTRARIA HACIENDO UN ngFor DENTRO DEL ngFor QUE MUESTRA LAS CATEGORÍAS
arrayCategorias['etiquetas'] = etiquetas;
this.categoriasEtiquetas.push(arrayCategorias);
}}
Esto no funciona y no sé como hacerlo. La idea es mostrar en la vista un listado de categorías de etiquetas con sus etiquetas dentro. Al poner algunos console log he podido comprobar que la llamada al servicio que me devuelve las etiquetas de las categorías iteradas si que funciona, es decir que ese no es el problema, el problema supongo que tiene que ver con la sincronización de todo esto, pero como estoy bastante en pañales con el Angular pues no tengo ni idea.
Este es el método getEtiquetas:
getEtiquetas(idCategoria: string){
this._filtroService.getEtiquetasCategoria(idCategoria).subscribe(
response => {
return response;
},
error => {
console.log(error);
}
);}
Se agradece cualquier ayuda.
getEtiquetas
que llamas enmetoCategorias
?getEtiquetasCategoria
, deberías devolver dicho observable para que sea el componente el que se suscriba