angular - 从ngrx@effects获取组件的错误响应

Question

我需要为表单中的每个输入字段设置服务器错误验证。
问题是，我使用 ngrx@store实际上我有

 @Effect({ dispatch: false })
  error$ = this.actions$.pipe(
    ofType(actions.UserActionTypes.Error),
    map(
      (error: actions.Error) => {
        new actions.Error(error);
      }
      //this.notificationService.warn(error.error.message)
    )
  );

使用此代码，我存储要存储的错误。

现在我需要在我的组件中获取这些错误，我想在其中检查哪个输入字段出现错误，并将错误设置为所选字段旁边的 HTML。

    this.errorsMsgs$ = this.store.select(fromStore.UserSelectors.getErrors);
    this.errorsMsgs$.pipe(takeUntil(this.destroy$)).subscribe((error: any) => {
      console.log(error);
      for (let err of error) {
        if (err.field === "username") {
          this.usernameError = err.defaultMessage;
        }
        if (err.field === "lastName") {
          this.lastNameError = err.defaultMessage;
        }
        if (err.field === "firstName") {
          this.firstNameError = err.defaultMessage;
        }
        if (err.field === "email") {
          this.emailError = err.defaultMessage;
        }
        if (err.field === "phone") {
          this.phoneError = err.defaultMessage;
        }
        if (err.field === "enabled") {
          this.enabledError = err.defaultMessage;
        }
      }
    });

问题是如果我把这段代码放在 ngOnInit ，我在控制台中收到错误，因为错误尚不存在。

ERROR TypeError: error is not iterable

CRUD 的功能在 ngrx@effect并且有成功结束错误......当提交方法有错误响应以及何时需要在组件中调用此方法以获取错误时，如何知道组件中？

有没有办法从效果中调用组件中的这个方法？

这是错误响应:

{
  "timestamp": "2020-01-14T11:37:51.533+0000",
  "status": 400,
  "error": "Bad Request",
  "errors": [{...}
  ],
  "message": "Validation failed for object='user'. Error count: 6",
  "path": "/user/add/"
}

Answer 1

您可以简单地订阅 actions可观察的 chanel，只需将其过滤为 ofType() 的异常(exception)操作组件中的操作符函数。前任:ngOnInit(){ this.actions$.pipe(ofType(action)).subscribe(action => console.log(action.payload)); } .您需要注入(inject) actions$在构造函数中可观察到，来自 import { Actions} from '@ngrx/effects'; .或者，如果您想将此结果保存在 store 中，只需使用 reducer，然后从 store 中选择异常值。