获取从 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，我会在控制台中收到错误消息，因为这些错误还不存在。

错误类型错误：错误不可迭代

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过滤异常操作。ofType()前任： ngOnInit(){ this.actions$.pipe(ofType(action)).subscribe(action => console.log(action.payload)); }。actions$您需要在构造函数中注入可观察的对象，来自import { Actions} from '@ngrx/effects';. 或者，如果您想将此结果保存在存储中，只需使用reducer，然后从存储中选择例外值。