*Ngfor is not traversing the array in html

Asked

Viewed 224 times

-1

I am consuming the Wirecard API to perform an integration, the moment I try to return all the cards that are registered to a client, I can get them only in the console.log menu, when I try to go through this array and show your data in my html, Just nothing comes up. I’d like your help to see what I’m missing.

  this.pacientesSubscription = this.pacienteProvider.buscarPacientes().subscribe(result => {
  result.filter(data => {
    if (data.uidUsuario == this.usuarioLogadoUid) {
      this.paciente = data;
      this.idUsuario = data.idMoip; //Id do usuário na plataforma moip
      this.moip.customer.getOne(data.idMoip) //Vou na api da moip e retorno o cliente que possui este id
        .then((response => {
          this.qtdCartoes = response.body.fundingInstruments.length;
          this.formasPagamento = response.body.fundingInstruments; //Retorna todas as formas de pagamento (debito, credito, etc...)
          let cartoesDeCredito: Array<any> = [];
          cartoesDeCredito = this.formasPagamento.filter(result => {
            return result.method == 'CREDIT_CARD'; //Filtro apenas os cartões de crédito
          })
          this.cartoesCredito = cartoesDeCredito.map(data => {
            return data.creditCard; //Mapeio o array de cartões de crédito e crio um array de objetos
          })
          console.log(this.cartoesCredito); //Aqui me retorna normalmente o array de objetos (no caso cartões)
        })).catch((err) => {
          console.log(err);
        })
    }
  })
})

The return of my console.log is as follows:

inserir a descrição da imagem aqui

My html is as follows:

<ion-content padding>
  <ion-item *ngFor="let teste of cartoesCredito">{{teste}}</ion-item>
   <div class="sem-cartao" *ngIf="qtdCartoes == 0">
     <img src="../../assets/icons/credit-card.svg" class="imagem-sem-cartao" 
     />
     <p style="white-space: pre-line; font-size: 1.4rem;">
     Nenhuma forma de pagamento cadastrada, clique abaixo para cadastrar uma 
     forma de pagamento e utilizar os nossos
     serviços
     </p>
   </div>
</ion-content>

inserir a descrição da imagem aqui My view, does not return anything as can be seen here:

  • Have you tried putting the result in the view, as text, only for debug: {{ cartoesCredito | json}}

  • 1

    Looking further, maybe your var test should look like this: {{ test.Brand }}

  • If I do {{cartoesCredito | json}} returns only this [].

  • And even putting the test.Rand still does not appear anything

  • strange, can provide a little more information of its class?

  • Put the whole component class

  • People, strangely now appeared. I honestly do not know what it was, because it is the code that I usually use in all projects. But I really appreciate your help and your time to respond.

Show 2 more comments

1 answer

0


I tested again here and now running on the device itself and not in the browser. On the device works normally, the only problem in question seems to be in the browser that took about 40 minutes to appear the information, I do not know what is and what was. But anyway it is now working normally. Thank you all for your help.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.