Angular 8 -如何解决“ExpressionChangedAfterItHasBeenCheckedError”

Question

我有一个将文件上传到数据库的组件。当文件上传时，我显示一个覆盖图，显示所选文件的数量和成功上传的文件数量。

我希望当上传的文件数量等于选择的文件数量时，覆盖图自动关闭。但是，我的实现导致了以下结果:

expressionchangedafterithasbeencheckedererror:检查后表达式已更改。以前的值:“ngIf: true”。当前值:“ngIf: false”

当选择上传文件时，我将overlay_uploadImage设置为true。这将显示覆盖。在覆盖图中，我有下面的div。我的意图是当上传计数等于选择上传的文件数量时，调用＜code＞overlay_uploadImage＜/code＞函数。此函数将overlay_uploadImage设置为false，从而隐藏覆盖容器。

 <div *ngIf="uploadCount == files.length?overlay_uploadImage:false"></div>

满足条件时调用的函数

overlay_imageUploads(){
    this.files = [];
    this.overlay_uploadImage = false;
}

Answer 1

您可以手动要求角度检测更改以消除此错误：

js prettyprint-override">import {ChangeDetectorRef} for '@angular/core';
[...]
    constructor(private cd: ChangeDetectorRef){}

    [...]

    overlay_imageUploads(){
        this.files = [];
        this.overlay_uploadImage = false;
        this.cd.detectChanges();
    }
    [...]

Answer 2

    constructor( private changeDetect: ChangeDetectorRef )

    overlay_imageUploads(){
    if (!(this.changeDetect as ViewRef).destroyed) {
          this.changeDetect.detectChanges()
          // do other tasks
          this.files = [];
          this.overlay_uploadImage = false;
      }
    }

此代码将强制更改值。

参见参考文献:https://angular.io/api/core/ChangeDetectorRef

Answer 3

当angular检查一个值，然后该值发生变化时，就会出现此错误，因为它不会中断，所以不是“错误”

我建议你使用不同的语法:

 <div *ngIf="overlay_UploadImage  && uploadCount === files.length"></div>