New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic change in label of mat-option gives ExpressionChangedAfterItHasBeenCheckedError #14793

Open
alexw10 opened this Issue Jan 11, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@alexw10
Copy link

alexw10 commented Jan 11, 2019

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?

@crisbeto crisbeto self-assigned this Jan 11, 2019

crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 11, 2019

fix(select): changed after checked error if selected option label cha…
…nges

Fixes a "changed after checked" error being thrown by `mat-select`, if the label of the selected `mat-option` changes.

Also fixes that the trigger value doesn't get updated until the next change detection.

Fixes angular#14793.
@alexw10

This comment has been minimized.

Copy link

alexw10 commented Jan 15, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment