Angular2 view not updated after callback function

Question

I'm using Meteor-Angular2 and slingshot package for uploading images to S3 storage. when returning from the function and assign to binded string, view not updated. (setTimout function is working and updating view, but uploader function not)

export class AdminComponent {

   public urlVariable: string = "ynet.co.il";

    constructor() {
        this.uploader = new Slingshot.Upload("myFileUploads");
        setTimeout(() => {
            this.urlVariable = "View is updated";
        }, 10000);
    }

    onFileDrop(file: File): void {
        console.log('Got file2');

        this.uploader.send(file, function (error, downloadUrl) {
            if (error) {
                // Log service detailed response
            }
            else {

                this.urlVariable = "View not updated";

            }
        });
    }

}

score 1 · Accepted Answer · answered Oct 20 '16 at 05:49

1

Use arrow functions (() =>) instead of function () to retain the scope of this.

    this.uploader.send(file, (error, downloadUrl) => {
        if (error) {
            // Log service detailed response
        }
        else {
            // now `this.` points to the current class instance
            this.urlVariable = "View not updated";

        }
    });

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

answered Oct 20 '16 at 05:49

Günter Zöchbauer

623,577
216
2,003
1,567

still the view is not updated, unless I move to another route in the router or do something that fire refresh of the page. – roish Oct 20 '16 at 05:58
Where is `onFileDrop` being called from? – Günter Zöchbauer Oct 20 '16 at 05:58
1

thanks ! with your answer and addition to this._ngZone.run(() => {this.urlVariable = "View not updated"; }); it is working now and updating immediately! :-) – roish Oct 20 '16 at 06:03

score 0 · Answer 2 · answered Oct 20 '16 at 06:04

this one is working for me: (narrow function+Ngzone)

 this.uploader.send(file, (error, downloadUrl) => {
        if (error) {
            // Log service detailed response
        }
        else {
            // now `this.` points to the current class instance
            this._ngZone.run(() => {this.urlVariable = "View not updated"; });


        }
    });

Angular2 view not updated after callback function

2 Answers2