在我的Angular 10应用程序中,我有以下NgRx效果:

loadValues$ = createEffect(() =>
  this.actions$.pipe(
    ofType(myActions.myActionTypes.LoadData),
    map((action: myActions.loadData) => action.payload),
    withLatestFrom(this._store.pipe(select(fromOtherState.getBioData))),
    switchMap(([action, profile]) => {
      return this.service
        .getDataValues(action["candidateID"], action["hasEnrolled"], profile)
        .pipe(
          map((data) => new myActions.LoadSuccess(data)),
          catchError((err) => of(new myActions.LoadFailed(err)))
        );
    })
  )
);

在这里,我想从"fromOtherState.getBioData"中获取值,在这里,它最初将具有空值,但稍后将触发另一个操作并填充此状态.所以,基本上,我想等到它的值不是空值,一旦它有了所需的值,我就想继续并触发成功操作.

请注意,"fromOtherState.getBioData"有一个关联的动作,当我启动上面的动作时,它会平行地触发,因为到目前为止,它总是给我的配置文件为空.

请注意,我try 了使用filter,如下所示:但没有成功:

loadValues$ = createEffect(() =>
  this.actions$.pipe(
    ofType(myActions.myActionTypes.LoadData),
    map((action: myActions.loadData) => action.payload),
    withLatestFrom(this._store.pipe(select(fromOtherState.getBioData))),
    filter(([action, profile]) => {
      return profile != null; // here I want to wait until it has value other than null
    }),
    switchMap(([action, profile]) => {
      return this.service
        .getDataValues(action["candidateID"], action["hasEnrolled"], profile)
        .pipe(
          map((data) => new myActions.LoadSuccess(data)),
          catchError((err) => of(new myActions.LoadFailed(err)))
        );
    })
  )
);

推荐答案

try 将您的 Select 器从withLatestFrom呼叫移动到concatMap,并try 在那里进行过滤.这样,剩下的效果应该等到getBioData有了一些价值.这就是withLatestFrom运营商的悲哀之处,它不在乎,只提供服务.

loadValues$ = createEffect(() =>
  this.actions$.pipe(
    ofType(myActions.myActionTypes.LoadData),
    map((action: myActions.loadData) => action.payload),
    concatMap((action) =>
      this_store.select(fromOtherState.getBioData).pipe(
        filter(profile => !!profile),
        map((profile) => ({action, profile}))
      )
    )
    switchMap(({action, profile}) => {
      return this.service
        .getDataValues(action["candidateID"], action["hasEnrolled"], profile)
        .pipe(
          map((data) => new myActions.LoadSuccess(data)),
          catchError((err) => of(new myActions.LoadFailed(err)))
        );
    })
  )
);

对我来说,测试它有点困难,但我有一种感觉,这种方法可能会奏效.

Angular相关问答推荐

RXJS运算符用于combineLatest,不含空值

如何在投影项目组周围添加包装元素?

Angular 类型的表单不能分配给分部类型

无法绑定到appendTo,因为它不是p-confirmPopup的已知属性

访问Angular 模板中的HTML元素属性

在Drective Composure API中使用指令输出

从Angular 前端访问ASP.NET Core 8 Web API时出现CORS错误

Angular 16 Auth Guard在具有0的服务时给出Null Injector错误;httpclient;被注入

当快速拖动光标时会丢失元素 - Angular

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

重新打开模态时 ng-select 中的重复值 - Angular

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

Angular 在关闭另一个对话框后打开另一个对话框的最佳做法是什么?

为什么 AngularFire .set() 永远等待响应并且不继续?

Angular keypress 存储空间而不是第一个字母

angular material日期 Select 器中的日期不正确

如何在 Angular 5 HttpInterceptor 中添加多个标头

Angular2 SVG xlink:href

CustomPipe 没有提供者

Angular CLI 为已经存在的组件创建 .spec 文件