0

Tenho um array com os dados do usuario, que são os dados que ele bateu ponto naquela data que ta no array. array:

[
0:{CCT: "150403",CODIGO_EVENTO: "012",COLABORADOR: "FULANO",DATA: "20190110",DESCRICAO: "ATRASO AUTORIZADO", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.24},
1:{CCT: "150403",CODIGO_EVENTO: "013",COLABORADOR: "FULANO",DATA: "20190110",DESCRICAO: "ATRASO ", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.24},
2:{CCT: "150403",CODIGO_EVENTO: "013",COLABORADOR: "FULANO",DATA: "20190110",DESCRICAO: "ATRASO AUTORIZADO", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.30},
3:{CCT: "150403",CODIGO_EVENTO: "012",COLABORADOR: "FULANO",DATA: "20190111",DESCRICAO: "ATRASO AUTORIZADO", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.31},
4:{CCT: "150403",CODIGO_EVENTO: "012",COLABORADOR: "FULANO",DATA: "20190111",DESCRICAO: "HORA EXTRA AUT. 50% ", FILIAL: "01",MATRICULA: "000457", QUANTC: 0.20}
]

Aí no HTML fica assim:

<div *ngFor="let dados of dadosColab">
<p class="text-light "><span class="text-warning">DATA:</span> {{formatDate(data)}} </p>
<p class="text-light"><span class="text-warning">QTDE. CALCULADA:</span> {{QUANTC}} </p>
<p class="text-light"><span class="text-warning">DESCRIÇÃO:</span> {{descri}} </p>
</div>

aí aparece:

DATA: 20190110
dados...
DATA: 20190110
dados...

só que eu preciso que mostre só uma vez a data, assim:

DATA: 20190110
    reg1
    reg2
    reg3
DATA: 20190111
    reg1
    reg2

e assim por diante, sem ficar repetindo a data. Tem alguma forma de fazer isso pelo proprio *ngFor ou mexendo no array? Estou perdida nesse problema

1

1 Resposta 1

0

Consegui responder com o comentario do Gesiel Rosa. link: https://www.competa.com/blog/custom-groupby-pipe-angular-4/

groupByPipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array<any>, property: string): Array<any> {
        // prevents the application from breaking if the array of objects doesn't exist yet
        if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        // this will return an array of objects, each object containing a group of objects
        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

HTML:

<div *ngFor="let dados of dadosColab | groupBy:'DATA'">
  <div class="row">
          <div class="col">
            <h5 class="text-warning"> {{formatDate(dados.key)}}</h5>
          </div>
        </div>
  <div class="row p-2" *ngFor="let dados of dados.value">
<div class="col">
            <p class="text-light"> <span class="text-warning"></span> {{dados.DESCRICAO}}</p>
          </div>
          <!-- ! -->
          <div class="col">
            <p class="text-light"><span class="text-warning"></span> {{dados.TPMARCA}}</p>
          </div>
          <!-- ! -->
          <div class="col">
            <p class="text-light"><span class="text-warning"></span> {{dados.QUANTC}}</p>
          </div>
</div>
</div>

module.ts

import { GroupByPipe } from './groupByPipe';


const ROUTES: Routes = [
    {path: '', component: ManagerBhDetailComponent }
]


@NgModule({
    declarations: [ManagerBhDetailComponent, GroupByPipe],
    imports: [RouterModule.forChild(ROUTES), SharedModule],
  providers: [

  ]
})

export class ManagerBhDetailModule{}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .