Представление Angular2 не обновляется после функции обратного вызова

#javascript #meteor #angular #meteor-slingshot

#javascript #метеор #angular #метеор-рогатка

Вопрос:

Я использую Meteor-Angular2 и пакет slingshot для загрузки изображений в хранилище S3. при возврате из функции и присвоении привязанной строке представление не обновляется. (Функция setTimout работает и обновляет представление, но функция загрузки нет)

 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";

            }
        });
    }

}
  

Ответ №1:

Используйте функции со стрелками ( () => ) вместо function () , чтобы сохранить область 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

Комментарии:

1. по-прежнему представление не обновляется, если я не перейду на другой маршрут в маршрутизаторе или не сделаю что-то, что запускает обновление страницы.

2. Откуда onFileDrop вызывается?

3. Спасибо! с вашим ответом и дополнением к этому._ngZone.run(() => {this.urlVariable = «Просмотр не обновлен»; }); он работает сейчас и обновляется немедленно! 🙂

Ответ №2:

это работает для меня: (узкая функция 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"; });


        }
    });