angular - Angular 8 - How to resolve 'ExpressionChangedAfterItHasBeenCheckedError'

Question

I have a component that uploads files to a database. Whilst the files are uploading I display an overlay with the amount of files selected, and the amount of files successfully uploaded.

I wanted the overlay to automatically close when the amount of files uploaded is equal to the amount of files selected. However, my implementation has resulted in the following:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'

When files are selected for upload, I set overlay_uploadImage to true. That will display the overlay. Inside the overlay I have the following div. My intention here was that when the upload count is equal to the amount of files selected for upload, then call the overlay_uploadImage function. This function will set overlay_uploadImage to false and therefore hide the overlay container.

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

Function called when criteria is met

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

标签： angularangular-ng-if

Answer 1

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

我建议您使用不同的语法：

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