Display Parse.com datas with *ngFor (Angular2)

Question

Sorry if have a bad english I'm french

I build an application using Ionic 2 Angular 2 and Parse.com. A few days ago I was using Ionic 1 and have no issues with my code.

When I do my query with Parse, data doesn't display on my HTML and I don't understand why.

Here is my JS :

        var Tiers = Parse.Object.extend("Tiers");
        var queryObject = new Parse.Query(Tiers);
        var lesTiers = new Array();

        //queryObject.equalTo("isActive", true);

        queryObject.find({
            success: function (results) {
                for (var i = 0; i < results.length; i++) {
                    tiers = results[i];
                    lesTiers[i] = {
                        nom: tiers.get('nomTiers'),
                        prenom: tiers.get('prenTiers')
                    };
                }
                console.log(lesTiers);
                this.lestiers = lesTiers;
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });

Here is my HTML :

    <ion-list>
        <ion-item *ngFor="#tiers of lestiers">
            {{tiers.nom}} {{tiers.prenom}}
        </ion-item>
    </ion-list>

===================================================================

My query is good, it returns an array of objects. When I try to replace the hole request by an array I build myself like this :

this.lestiers = [
        {nom: 'chien', prenom: 1},
        {nom: 'chat', prenom: 2},
        {nom: 'oiseau', prenom: 3},
        {nom: 'poisson', prenom: 4},
        {nom: 'lezard', prenom: 5}
    ];

It works perfectly. Then, I suppose this line :

this.lestiers = lesTiers;

doesn't works. It seems that i lost all my datas on this line.

Maybe I've forgot something important ?

Answer 1

I would suggestion to try the following:

• use the push method to add elements into your array
• save the component this to use it within the literal object (in functions success, ...). I think that the this keyword at this level isn't the one from the component but the one from your literal object