Ошибка Angular ExpressionChangedAfterItHasBeenCheckedError при использовании случайных чисел в индикаторе выполнения

#html #angular #typescript #random #progress-bar

#HTML #angular #typescript #Случайный #индикатор выполнения

Вопрос:

Я получаю это выражение, измененное после того, как я использую индикатор выполнения случайных чисел в моей таблице html grid.В нем говорится «Ошибка 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>

1. Поделитесь своим кодом.

2. Хорошо, я сделаю это @Amine

3. Поделился своим кодом @Amine

4. что это за переменная , которая отображается в html ?

5. я сразу вызываю свой getRandomNubmer() .

Ответ №1:

Возвращаемое значение GetRandomNumber() изменяется после того, как обнаружение изменения angular уже проверило его значение. Чтобы лучше понять ошибку, прочитайте эту статью:

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, просто создайте обработчик события click, чтобы переназначить randomNumber методу GetRandomNumber()

Ответ №2:

Вам нужно вручную проверить наличие изменений.

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

// Inject
constructor(private cd: ChangeDetectorRef)

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