角度和錯誤：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>