角度和错误：ExpressionChangedAfterItHasBeenCheckedError

Question

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

ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。 以前的值：'ngIf：未定义'。 当前值： '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...

当前图标显示没有任何错误但顺序错误！ 一切都向下移动了一行！ 你知道如何解决这个问题吗？

更新

嗯它不起作用。 更改后：

   export class FrameworkSearchResultsComponent extends PaginationComponent implements OnInit, AfterViewChecked {
    
   constructor(private cdRef: ChangeDetectorRef) {
    super();
  }

  ngOnInit() {
    this.pagination.sort = 'name,ASC';
    this.setPage.subscribe(val => {
      if (this.table) {
        this.table.first = val;
      }
    });
  }
    
    
    setLogoImage(logo: any) {
        setTimeout(() => {
          if (logo) {
            this.imgURL = 'data:image/jpeg;base64,' + logo;
          }
        }, 100);
      }
    
      ngAfterViewChecked(): void {
        this.cdRef.detectChanges();
      }

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

Answer 1

Angular 以间隔或事件对组件运行更改检测。 在您的情况下发生的情况是，您在 angular 运行它的更改检测之后和下一个更改检测周期之前对数据/视图进行了更改。

因此，角度将改变您在两者之间所做的更改。 该代码将工作，但不能保证它会在 100% 的时间内工作。

与您一起生成错误的行很可能是imgUrl ：
<img *ngIf="imgURL" [src]="imgURL" height="50" width="50" alt="logo">

您需要在诸如ngOnInit等更改挂钩中分配imgUrl或将其封装在settimeout以将更改延迟 50 到 100 毫秒。 然后您将不需要手动运行更改检测

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

Answer 2

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

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

以及模板的一些小变化：

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