0

O meu ngFor nao ta mostrando todos os dados que chega, mas no console mostra todos os resultados.

Puxo uns dados da API e nela tem um dado de vendas e outro de meta, eles vem em um array e eu uso o forEach neles, e se caso ele atingiu a meta ele deve ir pra outro array:

this.MetaService.FiliaisMetaDiarias().subscribe(
  data => {
    const response = (data as any)
    this.objeto_retorno = JSON.parse(response._body);

    this.objeto_retorno.forEach(element => {

      this.tots = element.TOTAL
      if (this.tots >= this.MetaAtingida) {

        this.fil = [
          {
            FI: element.FILIAL,
            porc: element.TOTAL
          }
        ]

        this.fil.forEach(elements => {
          this.mainColor = 'MetaAtingida'
        })

      }

Aí eu jogo no html:

<p [class]="mainColor + ' teste'" *ngFor="let elements of fil" >Filial {{ elements.FI }} = {{ elements.porc }}</p>

Ele deveria mostrar todos os resultados, mas por alguma razão está mostrando apenas o ultimo dado, mas no console ele mostra todos os dados.

Alguém pode me ajudar?

1
  • Tem como vc posta o código do seu serviço que faz essa chamada? Aonde esta esse console no seu código que mostra os dados? Commented 16/08/2018 às 16:25

2 Respostas 2

2

O erro está aqui:

this.fil = [
          {
            FI: element.FILIAL,
            porc: element.TOTAL
          }
        ]

Você está reinicializando this.fil em cada iteração do forEach, o que significa que ele sempre terá apenas o elemento corrente da iteração, no caso da última, o último elemento da coleção.

O correto seria inicializar this.fil fora do loop, e preencher com .push na iteração:

this.fil = [];
this.objeto_retorno.forEach(element => {
    this.fil.push({
        FI: element.FILIAL,
        porc: element.TOTAL
    });
 // resto do código...
});
1
  • 1
    Muito bem observado =)
    – Mathiasfc
    Commented 6/12/2018 às 13:02
2

Você está definindo a estrutura do this.fil toda iteração do forEach.

Por exemplo, vou supor que objeto._retorno é desta forma:

objeto [
   _retorno [
      { "FILIAL": "filial1",
        "porc": "porc1",
        "total": total1 },
      { "FILIAL": "filial2",
        "porc": "porc2",
        "total": total2 }
   ]
]

Caso o valor da propriedade "total" do elemento seja maior que a meta atingida, você assinala o valor do elemento a fil.

Então, no primeiro elemento, fil teria esse valor:

fil [
   FI: "filial1",
   porc: "porc1"
]

Mas no segundo, fil vai ser assinalado de novo, então ele fica assim:

fil [
   FI: "filial2",
   porc: "porc2"
]

O que você deveria fazer é um insert em fil, não assinalar o valor do objeto a fil. Algo como this.fil.append() deve resolver nesse caso.

1
  • Boa talvez fosse melhor usar o metodo map invés do forEach tbm Commented 16/08/2018 às 16:28

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 .