角度和错误：ExpressionChangedAfterItHasBeenCheckedError

Question

I don't know how to fix my problem. I have a table with rows In one of the columns there should be displayed some icon (data fetched from the backend service) but I get the following error in the console:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAk

Then I added

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

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

And my template:

 <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...

Currently icons are displayed without any errors BUT in the wrong order! Everything is shifted down one row! Do you have any idea how to fix that?

UPDATE

Hmm it doesn't work. After changes:

   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();
      }

my icons flash very often and wrong icons are display, eg. in row 1 and 2 are displayed the same icons (but in reality are different in each row)

Answer 1

Angular runs change detection on component in intervals or on events. What happened in your case is that you made change to data/view after angular ran it's change detection and before the next change detection cycle.

Hence, angular will the change you have made in between. The code will work but it's not guaranteed that it will work 100% of the time.

The line that's generating error with you is most possibly this with imgUrl :
<img *ngIf="imgURL" [src]="imgURL" height="50" width="50" alt="logo">

You need to assign the imgUrl in a change hook like ngOnInit etc or encapsulate it in a settimeout to delay the change for 50 to 100 milleseconds. You will then not need to run the change detection manually

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

Answer 2

OK I fixed my problem by changing method setLogoImage to getLogoImage:

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

And some small changes in template:

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