Angular 8 - 如何解决 'ExpressionChangedAfterItHasBeenCheckedError'

Question

我有一个组件可以将文件上传到数据库。在上传文件的同时，我会显示一个叠加层，其中包含所选文件的数量以及成功上传的文件数量。

我希望当上传的文件数量等于选择的文件数量时，覆盖自动关闭。但是，我的实施结果如下：

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

选择要上传的文件时，我将 overlay_uploadImage 设置为 true。这将显示叠加层。在叠加层内，我有以下 div。我的意图是当上传计数等于选择上传的文件数量时，然后调用 overlay_uploadImage 函数。此函数会将 overlay_uploadImage 设置为 false 并因此隐藏覆盖容器。

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

满足条件时调用的函数

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

Answer 1

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

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 检查一个值然后值发生变化时会出现此错误，它不是 "error" 因为它不会中断

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

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

Angular 8 - 如何解决 'ExpressionChangedAfterItHasBeenCheckedError'

Angular 8 - How to resolve 'ExpressionChangedAfterItHasBeenCheckedError'

angular-ng-if

angular