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 ?

Is your JS executed from within Angular code (component) or outside? If it is outside you need to inject NgZone and run the assignment within zone.run(function() { ... }) otherwise Angulars change detection won't recognize the change. I don't know how to use dependency injection in JS though. There are some questions with answers about DI with JS on SO. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 16, 2016 at 9:14

Thierry Templier · Accepted Answer · 2016-02-16 15:21:40Z

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

edited Feb 16, 2016 at 15:21

answered Feb 16, 2016 at 14:15

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display Parse.com datas with *ngFor (Angular2)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related