javascript - 调用方法作为图像源时出现 ExpressionChangedAfterItHasBeenCheckedError

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 属性的 getter，CD 调用的每个 get 都会获得不同的值。

RT 现在我在移动设备上，所以我很难准备一个 stackblitz 演示。

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