1

¡Hola a todos! Tengo un ngFor en el HTML tal que así:

<div *ngFor="let j of files">
 <div>
   <h3>{{j.titulo}}</h3>
   <p>{{j.parrafo}}</p>
 </div>
 <a href="{{j.archivo}}">Download</a>
</div>

Viene dado por el array de objetos "files" y con "j.year" imprimiría el año del archivo en cuestión.

El caso es que quiero separar los archivos por año, pero sólo quiero poner un título del año una vez y todos los archivos de ese año, y así sucesivamente.

AÑO 1
 archivo 1
 archivo 2
AÑO 2
 archivo 3
 archivo 4

Entiendo la lógica en otros lenguajes, pero me veo muy limitado en el HTML con Angular. Probé con *ngFor="let j of file; let year=j.year" pero no funciona...

¿Alguna idea?

1 respuesta 1

2

Solo tienes que crear un nuevo objeto y agrupar por año primero.

En tu componente haces esto

// Agrupas por año en un objeto, puedes usar un arreglo pero así es más rápido
const grouped = this.files.reduce((curr, file) => {
    if (!curr[file.year]) {
        // Si no has tenido ninguna entrada de ese año la agregas pero usando un arreglo
        curr[file.year] = [file];
    } else {
        // Si ya tienes ese año lo agregas al final del arreglo
        curr[file.year].push(file);
    }
    return curr;
}, {});

// Luego conviertes ese objeto en un arreglo que *ngFor puede iterar
this.groupedFiles = Object.keys(grouped).map(year => {
    return {
        year: year,
        files: grouped[year]
    };
});

Y modificas tu html para que tenga dos ciclos, uno por año y otro por fichero

<div *ngFor="let g of groupedFiles">
    <h2>{{g.year}}</h3>
    <div *ngFor="let j of g.files">
        <div>
            <h3>{{j.titulo}}</h3>
            <p>{{j.parrafo}}</p>
        </div>
        <a href="{{j.archivo}}">Download</a>
    </div>
</div>

Con lodash y groupBy ese código puede simplificarse pero ya es decisión tuya si quieres hacerlo o no.

3
  • Gracias @devconcept ! Pensé que Angular tendría alguna forma más elegante en la que resolviera ésto sin tener que tirar de JavaScript, aunque es una opción que sirve cuando no se quiera/pueda modificar el back-end. Veremos si alguien tiene otra solución, si no, marco la tuya como la solución. ¡Gracias nuevamente!
    – Xabi
    el 7 ene. 2019 a las 19:56
  • @Xabi Si la hay pero realmente genera mucho trabajo y no siempre vale la pena. Puedes usar un custom Pipe que te haga todo ese trabajo pero eso sólo vale si ese código se usa en muchos lugares diferentes y no quieres hacer una función helper para ello.
    – devconcept
    el 7 ene. 2019 a las 20:15
  • Genial @devconcept, voy a investigar cómo hacerlo con Pipes, ya que como dices, lo voy a usar mucho y quería hacerlo de una forma más optimizada. Gracias por la orientación, saludos.
    – Xabi
    el 7 ene. 2019 a las 20:27

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.