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

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

Get error response from ngrx@effects to component

angular

typescript

ngrx-store

ngrx-effects