1

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.

3
  • ¿Qué hace el método getEtiquetas que llamas en metoCategorias? el 5 ago. 2020 a las 7:56
  • Es el método que me consigue las etiquetas de la categoría por la que itero. He editado el mensaje para mostrarlo.
    – Javier Rey
    el 5 ago. 2020 a las 8:47
  • Como me imaginaba, ese método no devuelve nada. En lugar de suscribirte al resultado de getEtiquetasCategoria, deberías devolver dicho observable para que sea el componente el que se suscriba el 5 ago. 2020 a las 8:52

1 respuesta 1

0

El método getEtiquetasCategoria debería ser algo así:

getEtiquetas(idCategoria: string): Observer<any> {
  return this._filtroService.getEtiquetasCategoria(idCategoria)
}

con lo que el método que lo llama debería hacer algo como:

metoCategorias() {
 
  this.categorias.forEach(categoria => {
    this.getEtiquetas(categoria.id).subscribe(etiquetas => {
      const arrayCategorias = {
        id : categoria.id,
        nombre: categoria.nombre,
        etiquetas
      };
      this.categoriasEtiquetas.push(arrayCategorias);
    });
  });
}
1
  • Muchas gracias por tu ayuda Pablo. Me saca este error: error TS2304: Cannot find name 'Observer'.
    – Javier Rey
    el 5 ago. 2020 a las 15:59

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.