components: Dynamic change in label of mat-option gives ExpressionChangedAfterItHasBeenCheckedError
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?
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?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 13
- Comments: 20 (2 by maintainers)
Commits related to this issue
- fix(select): changed after checked error if selected option label changes Fixes a "changed after checked" error being thrown by `mat-select`, if the label of the selected `mat-option` changes. Also ... — committed to crisbeto/material2 by crisbeto 5 years ago
- fix(select): changed after checked error if selected option label changes Fixes a "changed after checked" error being thrown by `mat-select`, if the label of the selected `mat-option` changes. Also ... — committed to crisbeto/material2 by crisbeto 5 years ago
- fix(select): changed after checked error if selected option label changes Fixes a "changed after checked" error being thrown by `mat-select`, if the label of the selected `mat-option` changes. Also ... — committed to crisbeto/material2 by crisbeto 5 years ago
- fix(select): changed after checked error if selected option label changes Fixes a "changed after checked" error being thrown by `mat-select`, if the label of the selected `mat-option` changes. Also ... — committed to crisbeto/material2 by crisbeto 5 years ago
- fix(select): changed after checked error if selected option label changes Fixes a "changed after checked" error being thrown by `mat-select`, if the label of the selected `mat-option` changes. Also ... — committed to crisbeto/material2 by crisbeto 5 years ago
- fix(material/select): changed after checked error if option label changes Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is alternat... — committed to crisbeto/material2 by crisbeto 3 years ago
- fix(material/select): changed after checked error if option label changes Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is alternat... — committed to crisbeto/material2 by crisbeto 3 years ago
- fix(material/select): changed after checked error if option label changes Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is alternat... — committed to crisbeto/material2 by crisbeto 3 years ago
- fix(material/select): changed after checked error if option label changes Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is alternat... — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/select): changed after checked error if option label changes Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is alternat... — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/select): changed after checked error if option label changes (#23315) Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is... — committed to angular/components by crisbeto 2 years ago
- fix(material/select): changed after checked error if option label changes (#23315) Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically. This is... — committed to angular/components by crisbeto 2 years ago
Is this going to be checked in any time soon?
I have this same issue using
ngx-translate
on amat-option
object.Anyone… 😦?
I’ve also run into this issue. It would be great if the linked pull request could be merged!
I would like to let you know that this has been solved for me with Angular 10. @candelachris
@alogim I have the same issue with ngx-translate.
Were you able to find a workaround ?
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.here is an updated reproduction, showing this bug in Material 12.1.4