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

Question

当我在我的 html 网格表中使用随机数进度条时，我得到了这个 ExpressionChangedAfterItHasBeenCheckedError。它说“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化。以前的值：某个值。当前值：某个值。”。有人请帮我解决这个问题。

<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

在角度变化检测已经检查了它的值之后，getRandomNumber() 返回值发生变化。要更好地理解错误，请阅读这篇文章：

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

这是一个解决方案，创建一个名为 randomNumber 的类字段并将其分配给 getRandomNubmer() 的值。

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

在 HTML 中

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

如果您想更改您的 randomNumber，只需创建一个单击事件处理程序以将 randomNumber 重新分配给 getRandomNumber() 方法

Answer 2

您需要手动检查更改。

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

// Inject
constructor(private cd: ChangeDetectorRef)

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