derstauner's questions

我遇到了这个错误expression has changed after it was checked。我知道这个检查只在开发模式下运行（运行两次），并且在生产模式下不会出现这个错误信息。但我想知道为什么会这样。

我有一个基于信号的加载器服务，如下所示：

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);
  }
}

我也有这个拦截器：

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);
      })
    );
  }
}

始终设置USE_LOADING_SPINNER为 true，这意味着我只需标记那些我不想有任何加载指示器的请求。

由于LoaderService是基于信号的，因此我effect在组件的构造函数中注册了一个，如下所示：

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

请注意，该loading变量不是信号，而是一个纯布尔变量，因为该isLoading方法返回布尔值，而不是信号。

在模板中，我在网格组件中有这个：

[loading]="loading"

此设置正在运行，初始路由时会显示加载指示器。

现在我向组件添加一个刷新方法，如下所示：

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

但是，如果我点击刷新，主题标题就会报错，而且加载指示器也没有显示。拦截器被触发了，我检查了一下。

但如果我取消注释对它的调用，loaderService它就会按预期工作。

为什么我会收到这个错误？

我使用以下代码行填充网格：

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

对应的 HTML 代码如下：

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

它按预期工作。

我还有一个删除按钮。点击该按钮会删除用户。之后，我想从列表中删除该用户，但又不想发出额外的 HTTP 请求。我试过了shareReplay，但还是有额外的请求：

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

如何过滤网格数据以便删除已删除的用户而无需任何额外的 HTTP 请求？还是应该在初始化时将用户存储在局部变量中，并在添加、编辑或删除时修改数组并将其转换为可观察对象？

史前史就是这个问题。

我修改了validationMiddleware方法如下：

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();
}

然后在路由器中我这样做：

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

Cannot set headers after they are sent to the client但是，如果我想向此路由发送消息，并且发送的对象没有验证错误，则会收到错误。如果有验证错误，我会在 Postman 中收到错误，但在这种情况下，控制器方法也会被执行。

我做了研究，发现我发送了两次响应。一次在validationMiddleware方法中，一次在signUp方法中。

为了解决这个问题，我尝试了以下方法：

• 解析validate结果以避免出现异步函数和同步流
• 引入一个hasError变量，并返回该变量，如果不为真，则调用控制器方法
• 如果没有错误，则在else语句中调用next()
• return发送响应后使用以终止中间件

没有成功。那么问题是什么呢？

编辑

现在，我重新设计了这个功能：

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();
    }
  });
}

没有更多的async和await。我读取承诺的值，如果有任何错误，则将其发送给客户端，否则转到下一个中​​间件（控制器）。

但在这种情况下，控制器也会执行。如果这是错误的方法，我该如何解决？我想要实现的是：

• 验证传入的请求
• 如果有错误，则将其发送给客户端
• 否则执行控制器逻辑

我可以将验证逻辑写入控制器，但我认为这不太干净，这就是为什么我尝试在控制器外部使用单独的函数。

问题在于，验证（解决承诺）发生在调用控制器方法之后。我知道这一点，但该如何解决呢？validate该库的函数class-validator返回一个Promise。

编辑2：

事实证明，该validate函数也有一个同步变量。因此：

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;

在路线中：

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

现在它已按预期运行。