在进度条中使用随机数时出现 Angular ExpressionChangedAfterItHasBeenCheckedError

Question

I get this ExpressionChangedAfterItHasBeenCheckedError when i am using random numbers progress bar in my html grid table.It says "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: some value. Current value: some value.". Someone please help me with the issue.

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active">
        <button class="btn btn-primary" (click)="goToAddUser()">Add User</button>
      </a>
    </li>
  </ul>
</nav>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h2>User List</h2>
  </div>
  <div class="panel-body">
    <table class="table table-striped">
      <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Actions</th>
        <th>Progress</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users | async">
        <td>{{user.firstname}}</td>
        <td>{{user.lastname}}</td>
        <td>{{user.email}}</td>
        <td>
          <button (click)="goToEditUser(user.id)" class="btn btn-info">Update</button>
          <button (click)="deleteUser(user.id)" class="btn btn-danger" style="margin-left: 10px">Delete</button>
          <button (click)="goToViewUser(user.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
        </td>
        <td>
          <mat-progress-bar [value]="number" style="margin-right: 300px"></mat-progress-bar>
          {{ number }}%
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

The getRandomNumber() return value changes after angular change detection already checked its value. To understand the error better, read this article:

• https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Here's one solution, make a class field called randomNumber and assign it to the value of getRandomNubmer().

class YourComponentClass { randomNumber : number = this.getRandomNumber(); ... }

In Html

<td> <mat-progress-bar [value]="randomNumber" style="margin-right: 300px">
</mat-progress-bar> {{ randomNumber }} </td>

if you want to change your randomNumber just create a click event handler to reassign randomNumber to getRandomNumber() method

Answer 2

You need to manually check for changes.

// Import
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

// Inject
constructor(private cd: ChangeDetectorRef)

// Call after making changes in component
someMethod() {
 this.cd.detectChanges();
}