Although this question has been asked multiple times, I have read similar issues and still struggle to organize my code to resolve this particular exception.
Within my component, there is a property that dynamically changes based on a condition:
public emailToValue: string
Inside my HTML file, users have the ability to manually add a new row, triggering a pipe to set the value assigned in the component:
<ng-container matColumnDef="emailTo">
<mat-header-cell *matHeaderCellDef mat-sort-header>Email To</mat-header-cell>
<mat-cell *matCellDef="let userMarket">
{{ userMarket | formatEmailTo : emailToValue}}
<input type="text" matInput [value]="userMarket.emailTo">
</mat-cell>
</ng-container>
This pipe sets a default email to be displayed in the new row if the email is null or undefined:
@Pipe({
name: 'formatEmailTo',
})
export class FormatEmailPipe implements PipeTransform {
public transform(userMarket: UserMarketDTO, email: string): void {
if (_.isNil(userMarket.emailTo)) {
userMarket.emailTo = email;
}
}
}
The functionality works correctly, but an exception occurs each time a new row is created:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value: undefined'. Current value: 'value: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9caccc9d6cbcdf9caccc9c9d6cbcd97dad6d4">[email protected]</a>'.
Any assistance would be greatly appreciated.
Thank you.