Início / coding / Perguntas / 79586063
Accepted
derstauner
Asked: 2025-04-22 17:08:46 +0800 CST

erro "a expressão foi alterada após ser verificada", apesar de ter a configuração correta

  • 772

Estou enfrentando o erro expression has changed after it was checked. Sei que esta verificação só é executada no modo de desenvolvimento (executa duas vezes) e que não terei a mensagem de erro no modo de produção. Mas quero saber por que isso acontece.

Eu tenho um serviço de carregador baseado em sinal como este:

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  private _isLoading = signal<boolean>(false);

  get isLoading(): boolean {
    return this._isLoading();
  }

  show() {
    this._isLoading.update(() => true);
  }

  hide() {
    this._isLoading.update(() => false);
  }
}

Eu também tenho este interceptador:

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpResponse,
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, catchError, map, throwError } from 'rxjs';
import { USE_LOADING_SPINNER } from '../constants/app.constants';
import { LoaderService } from '../../shared/services/loader.service';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loaderService: LoaderService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.context.get(USE_LOADING_SPINNER)) this.loaderService.show();

    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) this.loaderService.hide();
        return event;
      }),
      catchError((error) => {
        this.loaderService.hide();
        return throwError(() => error);
      })
    );
  }
}

O USE_LOADING_SPINNERé sempre definido como verdadeiro, o que significa que tenho que marcar apenas as solicitações em que não quero ter nenhum indicador de carregamento.

Como o LoaderServiceé baseado em sinal, registro um effectno construtor de um componente como este:

constructor() {
    effect(() => {
      this.loading = this.loaderService.isLoading;
    });
  }

Observe que a loadingvariável não é um sinal, é uma variável booleana pura, já que o isLoadingmétodo retorna um valor booleano, não um sinal.

E no modelo eu tenho isso em um componente de grade:

[loading]="loading"

Esta configuração está funcionando. No roteamento inicial, o indicador de carregamento está sendo exibido.

Agora adiciono um método de atualização ao componente como este:

refresh() {
    //this.loaderService.show();
    this.gridData$ = this.userService.getUsers();
    //.pipe(tap(() => this.loaderService.hide()));
  }

Mas se eu clicar em atualizar, aparece o erro no título do tópico e o indicador de carregamento não aparece. O interceptador é acionado, eu verifiquei isso.

Mas se eu descomentar as chamadas, loaderServiceele funciona como esperado.

Por que recebo esse erro?

angular

2 respostas

  1. Espero que você entenda o que esse erro significa no caso comum de "configuração errada".

    No seu caso, você provavelmente tem uma marcação

      [loading]="loading" // change detection checks values from top to bottom. 
  // loading value is checked here and the value is false

  // later in the template, or somewhere in children
  [data]="gridData$ | async" // during execution of THIS LINE http request fires, 
 // interceptor code is executed, loading is set to true, which obviously causes that error.

    para corrigir isso, você deve transformar seu código para executar a chamada http durante o tratamento de eventos em vez de durante a execução do modelo. por exemplo, via rxjs

    private refresh$ = Subject<void>();
gridData$ = this.refresh$.pipe(
  startWith(undefined), 
  exhaustMap(() => this.userService.getUsers())
);

refresh() {
  this.refresh$.next(); // this way http call will happen during this line execution
}
    • 1
  2. Best Answer

    Acredito que o erro expression has changed after it was checkedpossa ser devido à atualização loadingapós a inicialização da visualização. Em vez disso, opte por uma atualização baseada em sinal, que pode não gerar esse erro.

    Acredito que seja devido ao uso indevido de getterand signal, em vez de executar o sinal no nível de serviço, retornar o sinal real.

    Quando você quiser fazer algo com o estado anterior, use update, caso contrário set é uma opção melhor.

    Seu sinal é privado e você só quer retornar uma versão somente leitura do sinal, então usamos asReadonly()para remover as operações graváveis set​​quando updateo componente usa esse sinal.

    import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  private _isLoading = signal<boolean>(false);

  get isLoading(): boolean {
    return this._isLoading.asReadonly(); // prevent modification of the signal
  }

  show() {
    this._isLoading.set(true);
  }

  hide() {
    this._isLoading.set(false);
  }
}

    Agora, no nível do componente, em vez de , effecto que é exagero, basta atribuir a propriedade de serviço a uma propriedade de componente.

    // or
// loading = this.loaderService.isLoading;

constructor() {
  this.loading = this.loaderService.isLoading;
}

    No nível do modelo, execute o sinal.

    [loading]="loading()"
    • -1

relate perguntas