Angular 角度和误差：表达式ChangedTerithasBeenCheckedError

我不知道如何解决我的问题。我有一个表，其中一列中有行，应该显示一些图标（从后端服务获取的数据），但控制台中出现以下错误：

ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。上一个值：“ngIf:undefined”。当前值：'ngIf:data:image/jpeg；base64，/9j/4AAQSkZJRgABAQEAk

然后我补充说

     setLogoImage(logo: any) {
    if (logo) {
      this.imgURL = 'data:image/jpeg;base64,' + logo;
    }
  }

  ngAfterViewChecked(): void {
    this.cdRef.detectChanges();
  }

和我的模板：

 <ng-template let-columns="columns" let-rowData pTemplate="body">
    <tr>
      <td class="ui-resizable-column">{{ rowData['name'] || '' }}</td>
      <td class="ui-resizable-column">{{ rowData['active'] | yesNoBoolean }}</td>
      <td class="ui-resizable-column">
       //some data
      </td>
      <td class="ui-resizable-column">{{ setLogoImage(rowData['logo']) }}<img *ngIf="imgURL"
                                                                              [src]="imgURL" height="50"
                                                                              width="50" alt="logo"></td>
      <td class...

<td class="ui-resizable-column"><img *ngIf="rowData['logo']"
                                           [src]="getLogoImage(rowData['logo'])" height="50"
                                           width="50" alt="logo"></td>

---

我的图标经常闪烁，显示错误的图标，例如，在第1行和第2行中显示相同的图标（但实际上每行都不同）

在间隔或事件中对组件进行角度运行变化检测。在您的案例中，您在数据/视图的更改检测之后和下一个更改检测周期之前对其进行了更改

因此，你在两者之间所做的改变将是有角度的。代码可以工作，但不能保证它在100%的时间内都能工作

与您产生错误的行很可能是与

imgUrl

：

您需要在像

ngOnInit

等更改挂钩中分配

imgUrl

，或者将其封装在

settimeout

中，以将更改延迟50到100千秒。然后，您将不需要手动运行更改检测

setLogoImage(logo: any) {
    setTimeout(()=> {
     if (logo) {
      this.imgURL = 'data:image/jpeg;base64,' + logo;
    }
  },100);
}

---

好的，我通过将方法setLogoImage更改为getLogoImage解决了我的问题：

  getLogoImage(logo: any) {
    if (logo) {
      return 'data:image/jpeg;base64,' + logo;
    }
  }

以及模板中的一些小更改：

 <ng-template let-columns="columns" let-rowData pTemplate="body">
    <tr>
      <td class="ui-resizable-column">{{ rowData['name'] || '' }}</td>
      <td class="ui-resizable-column">{{ rowData['active'] | yesNoBoolean }}</td>
      <td class="ui-resizable-column">
       //some data
      </td>
      <td class="ui-resizable-column">{{ setLogoImage(rowData['logo']) }}<img *ngIf="imgURL"
                                                                              [src]="imgURL" height="50"
                                                                              width="50" alt="logo"></td>
      <td class...

<td class="ui-resizable-column"><img *ngIf="rowData['logo']"
                                           [src]="getLogoImage(rowData['logo'])" height="50"
                                           width="50" alt="logo"></td>

您是否介意在您的问题中显示上述函数的其余部分

setLogoImage（logo:any）

？可能有机会延迟对

imgURL

分配的更改我更新了我的代码更新了我的代码。。。不幸的是这不起作用。。。也许我做错了什么，而你是对的，这个问题与我有关。。。当我从模板中删除*ngIf=“imgURL”时，图标会按良好的顺序显示，但每行中都会显示图标，什么不是desirable@Matley将超时时间从100增加到200，然后继续增加直到问题解决您所说的“然后继续增加直到问题解决”是什么意思？您使用setTimeout的第一个解决方案对我不起作用，如果我将延迟（例如）设置为500，则我必须等待几秒钟，直到我的页面完全加载（我的加载微调器显示了很长一段时间）…加载所有图标后，顺序仍然是错误的…那么我是否应该在某个钩子中指定imgURL变量？