Question

我创建了这个Angular 7应用程序，试图在其中获取图像源，如下所示：

<div *ngIf="showAllRec" class="pt-3">
<div *ngFor="let recommendation of allRecommendations">
  <div class="row pt-2">
    <div class="col-12">
      <img [src]="generateProfilePictures()">
    </div>
  </div>
</div>

generateProfilePictures() {
  const profiles = [
  '../assets/profiles/dark-blue.png',
  '../assets/profiles/dark-grey.png',
  '../assets/profiles/light-blue.png',
  '../assets/profiles/light-green.png',
  '../assets/profiles/light-grey.png',
  '../assets/profiles/light-red.png',
  '../assets/profiles/medium-blue.png',
  '../assets/profiles/medium-brown.png',
  '../assets/profiles/medium-orange.png',
  '../assets/profiles/medium-purple.png',
  '../assets/profiles/medium-red.png',
  '../assets/profiles/medium-yellow.png',
  ];
  return profiles[Math.floor(Math.random() * profiles.length)];

}

以下结果将导致错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。知道为什么会这样吗？

Answer 1

发生此错误的原因是，在development中，Angular将运行两次更改检测以确保在完成第一次CD运行时，已经由CD检查的组件在CD运行过程中不应更改值。

在您的情况下，方法generateProfilePictures()充当src属性的获取器，并且CD调用的每个get都会获得不同的值。

RT现在我在移动设备上，因此我很难准备要演示的Stackblitz。

但是您可以通过捕获随机生成的索引或将函数内容包装在settimeout / observable中来延迟此计算（仍然需要尝试，不能确定是否在手机上）

Answer 2

在组件中使用ChangeDetectionStrategy.OnPush。

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush  //<====Add this property
})

这里正在进行堆叠闪电战：ExpressionChangedAfterItHasBeenCheckedError Solved

调用方法作为图像源时的ExpressionChangedAfterItHasBeenCheckedError

2 个答案: