*ngFor not show data (async)

Ionic Framework ionic-v3
1

I’m trying to show data on a page with *ngFor but it does not show me the data. I think the problem is because the data is asynchronous. Although in the browser with another project for some reason showed the letters without color.

They could help me by indicating how to obtain the data in an asynchronous way to show them on the page.

The function that obtains the data is: enviarData and it runs after getting the token.

In the provider i use import { HTTP } from ‘…/…/…/node_modules/@ionic-native/http’;

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>Estado de Cuenta</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <h1>Movimientos</h1>
    <ion-list>
        <ion-item item text-wrap *ngFor="let movimiento of movimientos">
            <p style="font-weight: bold;">
                <ion-icon name="clipboard"></ion-icon> {{ movimiento.NombreRetencion }}</p>
            <p> {{ movimiento.Fecha }} </p>
            <ion-grid>
                <ion-row>
                    <ion-col col-3>
                        Capital
                    </ion-col>
                    <ion-col col-3>
                        Intereses
                    </ion-col>
                    <ion-col col-3>
                        Valor
                    </ion-col>
                    <ion-col col-3>
                        Saldo Anterior
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col col-3>
                        {{ movimiento.Capital }}
                    </ion-col>
                    <ion-col col-3>
                        {{ movimiento.Intereses }}
                    </ion-col>
                    <ion-col col-3>
                        {{ movimiento.Valor }}
                    </ion-col>
                    <ion-col col-3>
                        {{ movimiento.SaldoAnterior }}
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-item>
    </ion-list>
</ion-content>

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ServiceProvider } from '../../providers/service/service';
import { Toast } from '@ionic-native/toast';
@IonicPage()
@Component({
  selector: 'page-movimientos',
  templateUrl: 'movimientos.html',
})
export class MovimientosPage {
  movimientos: any;
  fechainicial: any;
  fechafinal: any;
  loading: any;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public webService: ServiceProvider,
    private toasNative: Toast) {

      this.fechainicial = this.navParams.get("fi");
      this.fechafinal = this.navParams.get("ff");
      this.getMovimientos();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MovimientosPage');
  }
  getMovimientos() {
    this.webService.getCookie("json") //get token from storage
      .then((value) => {
        this.enviarData(value);
      }).catch((error) => {  
        this.toasNative.show(error, "3000", "bottom")
          .subscribe();
      });
  }

  enviarData(value) {
    this.webService.getMovimientosEstadoCuenta(value)
      .then((response) => {
        this.movimientos = response.data;
      }).catch((error) => { //errores de obtener la data del ws enviando el token
        this.toasNative.show(JSON.stringify(error), "8000", "bottom")
          .subscribe();
      });
  }
}

In my provider:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HTTP } from '../../../node_modules/@ionic-native/http';
import { Storage } from '../../../node_modules/@ionic/storage';
import { Toast } from '@ionic-native/toast';
import { Platform } from 'ionic-angular';

@Injectable()
export class ServiceProvider {

  public url: string = "http://intsdfca2:84";
  private header1: string = "application/x-www-form-urlencoded";
  constructor(public nativeHttp: HTTP, private nativeStorage: Storage, private toasNative: Toast, platform: Platform) {

  }

  doLogin(arrayData) {
    return this.nativeHttp.post(this.url + '/api/Login', arrayData, {
      "Content-Type": this.header1,
    });
  }

  getCookie(key) {
    return this.nativeStorage.get(key);
  }


//function get movs
getMovimientosEstadoCuenta(head) {
    let bearer ='Bearer '+head; 
    return this.nativeHttp.get(this.url + '/api/EstadoDeCuenta', {}, {
      "Authorization": bearer,
    });
  }
}
2

You must initialize any property that is referenced by templates to a sane state (at a bare minimum, [] for arrays and {} for objects). I recommend always doing this at definition time if at all possible.

You are also abusing any. Take the time to declare business-level interfaces and provide proper types for everything under your control: it may seem like extra effort initially, but it will pay off in many ways later: your code will become self-documenting, and your IDE and build tools can help you avoid many bugs before runtime.

1 Like
3

Thank you very much for the comments, I will try to improve the code to avoid problems. Now, can you help me in how to receive the data asynchronously to be able to show them, please? Greetings.

4

I already did, but Discourse won’t let me say just that.