角度中的 getter 值抛出 ExpressionChangedAfterItHasBeenCheckedError

Question

I'm getting ExpressionChangedAfterItHasBeenCheckedError for the getter value I'm using in my component

public get selectedRows() {
  if (this.gridApi) {
    return this.gridApi.getSelectedRows();
  } else {
    return null;
  }
}

Here is my HTML code where I'm using this selectedRows

<div *ngIf="selectedRows && selectedRows.length > 0" class="btn-cls">
  <button>submit</button>
</div>

I tried [hidden] instead of *ngIf but still getting the same error.

Answer 1

The exception thrown is how Angular prevent inconsistency between the data model and view, therefore wrong or old data is not shown to the final user. Please check that link out: https://indepth.dev/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error/

The link above will help to understand how Angular avoid inconsistency in data during the change detection process, and will probably help you to solve your issue.

Answer 2

I was able to resolve my issue using ngDoCheck instead of getter

ngDoCheck(): void {
  if (this.gridApi && this.gridApi.getSelectedRows() && this.gridApi.getSelectedRows().length > 0) {
    this.isRowSelected = true;
  } else {
    this.isRowSelected = false;
  }
}

HTML:

<div *ngIf="isRowSelected" class="btn-more">
  <button>submit</button>
</div>