derstauner's questions

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?

Eu preencho uma grade com a seguinte linha de código:

this.gridData$ = this.userService.getUsers();

e este é o HTML correspondente:

[kendoGridBinding]="(gridData$ | async)!"

Funciona como esperado.

Também tenho um botão de exclusão. Clicar nele exclui o usuário. Depois disso, quero remover o usuário da lista, mas sem fazer uma solicitação HTTP extra. Tentei shareReplay, mas a solicitação extra está lá:

this.gridData$ = this.gridData$.pipe(
              shareReplay({ bufferSize: 1, refCount: true }),
              map((users) => {
                return users.filter(
                  (user) => user.userId !== this.currentDataItem.userId
                );
              })
            );

Como filtrar os dados da grade para excluir o usuário excluído sem nenhuma solicitação HTTP adicional? Ou devo armazenar os usuários em uma variável local no init e modificar o array ao adicionar, editar ou excluir e convertê-lo em um observável?

A pré-história era essa questão.

Revisei o validationMiddlewaremétodo assim:

export async function validationMiddleware<T extends object>(
  dtoClass: new () => T,
  validateTarget: string,
  req: Request,
  res: Response,
  next: NextFunction,
) {
  const dtoInstance = new dtoClass();
  const request = {
    body: req.body,
    query: req.query,
    params: req.params,
  };
  Object.assign(dtoInstance, request[validateTarget as keyof typeof request]);
  //request[validateTarget as keyof typeof request] = dtoInstance;
  const errors: ValidationError[] = await validate(dtoInstance, {
    forbidUnknownValues: true,
    whitelist: true,
    forbidNonWhitelisted: true,
  });
  if (errors.length > 0) {
    const validationErrors = errors.map((error) => ({
      [error.property]: Object.values(error.constraints || {}),
    }));
    const errorMessage = 'Invalid data provided';
    const errorResponse = { message: errorMessage, errors: validationErrors };
    return res.status(422).json(errorResponse);
  }
  next();
}

Então no roteador eu fiz isso:

userRoutes.post('/users/signup', (req, res, next) => {
  validationMiddleware(CreateUserDto, 'body', req, res, next);
  userController.signUp(req, res);
});

Mas se eu quiser postar nesta rota, recebo o erro Cannot set headers after they are sent to the client, se o objeto postado não tiver erro de validação. Se tiver algum, recebo os erros no Postman, mas também, neste caso, o método do controlador é executado.

Fiz uma pesquisa e entendi que envio a resposta duas vezes. Uma vez no validationMiddlewaremétodo e outra no signUpmétodo.

Para superar isso, tentei o seguinte:

• resolver o validateresultado para evitar ter uma função assíncrona e ter um fluxo síncrono
• introduza uma hasErrorvariável e retorne-a, e se não for verdadeira, chame o método do controlador
• se não houver erros, então em uma elsechamada de declaraçãonext()
• use returnapós enviar a resposta para encerrar o middleware

Sem sucesso. Qual é então o problema?

EDITAR

Agora, eu retrabalhei a função:

export function validationMiddleware<T extends object>(
  dtoClass: new () => T,
  validateTarget: string,
  req: Request,
  res: Response,
  next: NextFunction,
) {
  console.log('validation');
  let hasErrors = false;
  const dtoInstance = new dtoClass();
  const request = {
    body: req.body,
    query: req.query,
    params: req.params,
  };
  Object.assign(dtoInstance, request[validateTarget as keyof typeof request]);
  //request[validateTarget as keyof typeof request] = dtoInstance;
  //const errors: ValidationError[] = [];
  validate(dtoInstance, {
    forbidUnknownValues: true,
    whitelist: true,
    forbidNonWhitelisted: true,
  }).then((errors) => {
    if (errors.length > 0) {
      const validationErrors = errors.map((error) => ({
        [error.property]: Object.values(error.constraints || {}),
      }));
      const errorMessage = 'Invalid data provided';
      const errorResponse = { message: errorMessage, errors: validationErrors };
      res.status(422).json(errorResponse);
    } else {
      next();
    }
  });
}

Não há mais asynce await. Eu leio o valor da promessa e, se houver algum erro, envio para o cliente; caso contrário, vou para o próximo middleware (controlador).

Mas também neste caso, o controlador é executado. Se esta for uma maneira errada, como devo resolver? O que eu quero alcançar é o seguinte:

• validar a solicitação recebida
• se houver erros, envie para o cliente
• caso contrário, execute a lógica do controlador

Eu poderia escrever a lógica de validação no controlador, mas acho que isso não seria tão limpo, é por isso que estou tentando usar uma função separada fora do controlador.

O problema é que a validação (resolvendo a promessa) acontece após a invocação do método do controlador. Eu sei disso, mas como resolver isso? A validatefunção da class-validatorbiblioteca retorna um Promise.

EDIÇÃO 2:

Descobriu-se que a validatefunção também possui uma variante de sincronização. Então:

const dtoInstance = new dtoClass();
  const request = {
    body: req.body,
    query: req.query,
    params: req.params,
  };
  Object.assign(dtoInstance, request[validateTarget as keyof typeof request]);
  //request[validateTarget as keyof typeof request] = dtoInstance;
  const errors: ValidationError[] = validateSync(dtoInstance, {
    forbidUnknownValues: true,
    whitelist: true,
    forbidNonWhitelisted: true,
  });
  if (errors.length > 0) {
    console.log('validation');
    const validationErrors = errors.map((error) => ({
      [error.property]: Object.values(error.constraints || {}),
    }));
    const errorMessage = 'Invalid data provided';
    const errorResponse = { message: errorMessage, errors: validationErrors };
    res.status(422).json(errorResponse);
  }
  return errors.length > 0;

E no percurso:

userRoutes.post('/users/signup', (req, res, next) => {
  if (!validationMiddleware(CreateUserDto, 'body', req, res, next))
    userController.signUp(req, res);
});

Agora funciona como esperado.