Angular2 ngIf在文件上传后不更新（使用ng2-file-upload）

Question

我想让上传面板在上传完成后自动隐藏，所以我有以下代码：

@Component({
    selector: 'upload-layer',
    template: `<div *ngIf="showUploadLayer">
        <!-- ...(some inputs and buttons here)... -->
</div>`,
    directives: [FILE_UPLOAD_DIRECTIVES]
})


export class UploadPanel {

    public uploader: FileUploader = new FileUploader({ url: URL });

    showUploadLayer : boolean = false;

    constructor(private ref: ChangeDetectorRef){

        this.uploader.onCompleteAll = function(){
            this.showUploadLayer = false;
            console.log("onCompleteAll");  // this one get called correctly.
            ref.detectChanges();           // try forcing a check here but still not updated
        };
    }
}

onCompleteAll() 被调用，但具有 ngIf 条件的 div 元素仍然可见，即使我将值设置为 false。 我搜索了如何强制检查更改并添加了 detectChanges() 但它仍然无法正常工作。

Answer 1

如果您希望this 引用当前类，请不要使用function ()。

this.uploader.onCompleteAll = function(){

应该是

this.uploader.onCompleteAll = () => {

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