Dynamic change in label of mat-option gives ExpressionChangedAfterItHasBeenCheckedError

[alexw10]

What is the expected behavior?

Error should not occur for this scenario.

What is the current behavior?

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: '. Current value: 'null: Change to localized version'.

What are the steps to reproduce?

StackBlitz

Essentially I mimicked a similar thing that I am seeing with this stackblitz.
In the real world we have pipe that goes to a service to retrieve a localized version of a string.
What happens is we call this pipe and it goes to a service that file does a http get for a json and finds a string that is in the proper language.

Our form field select is like so:

<mat-form-field>
  <mat-select
    id="clinicPrefReportsDropdown"
    class="select-reports"
    [disabled]="!isButtonEnabled"
    (selectionChange)="SelectReportsChanged($event)"
    [value]="SelectedReport"
  >
      <mat-option value="ClinicPreferredReports">{{
        'ClinicPreferredReports' | localize: localizationSection
      }}</mat-option>
       <mat-option value="MyPreferredReports">{{
        'MyPreferredReports' | localize: localizationSection
      }}</mat-option>
       <mat-option value="CustomReports">{{
          'CustomReports' | localize: localizationSection
      }}</mat-option>
  </mat-select>
</mat-form-field>

What happens is those labels start off as null and when the service comes back with the proper string it changes it and this is where the expressed changed error comes into play. So my stackblitz simulates this with having option1 as a variable in OnInit I put a setTimeout for 2 seconds to change the string and there error comes up.

I guess I am wondering if this is truly a bug or if I need to do something different to not allow this to happen. I did get this to work by manually calling a change detection after the localize variable we have gets populated (and take the pipe out of the equation) but this is a workaround to the problem I feel like.

Any thoughts?

[alexw10]

Any ETA on when this fix will be available in a version? just curious thanks for fixing it @crisbeto !

[alexw10]

Is this going to be checked in any time soon?

[mregni]

I could use this fix as well in my projects. Any idea if someone can check the PR?

[alexw10]

Anyone... :(?

[vmuresanu]

I had the following scenario:

      <mat-form-field fxFlex *ngIf="!shouldDisplaySelectSwitcher()">
          <mat-label>Amount</mat-label>
          <input formControlName="value_1" matInput [errorStateMatcher]="matcher" (input)="onValueChange($event)/>
        </mat-form-field>
        <mat-form-field fxFlex *ngIf="shouldDisplaySelectSwitcher()">
          <mat-label>Amount</mat-label>
            <mat-select formControlName="value_1" [errorStateMatcher]="matcher" (selectionChange)="onValueChange($event)">
              <mat-option *ngFor="let nr of oneToTenArray; let i = index" [value] = i+1>
                {{nr}} min
              </mat-option>
            </mat-select>
        </mat-form-field>

Depending on a condition I had to either display an input field or a select field. And form field was transforming into select, but when chosing an option, ExpressionChangedAfterItHasBeenCheckedError appeared always, also when converting back to input field, firing key event resulted in the same error. So I lost some time investigating the issue, and this article helped me to understand the root of the problem -> https://blog.angular-university.io/angular-debugging/. But the real solution I found on stackoverflow (sorry can't find original link), but basically
I've injected private cdr: ChangeDetectorRef in component's constructor and in the method:

onValueChange() { 
        this.cdr.detectChanges();
}

[0xorial]

This is really messing with error reporting in our app. Could anyone provide a workaround?

[diosney]

Something similar happens with mat-selection-list, which triggers:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'aria-selected: true'. Current value: 'aria-selected: false'

I fixed too by running this.changeDetectorRef.detectChanges(); after the variable used as source for the items got updated.