Question

我们正在使用Angular 6和Redux。

其中一个组件的初始化如下：

ngOnInit() {
    this.parameterActions.loadParameters();
    this.principleActions.loadPrinciples();
    this.domainPrincipleActions.loadDomainPrinciples();
    this.domainActions.loadDomains();
    this.matrixElementActions.loadMatrixElements();

    const stepParam = +this.route.snapshot.queryParamMap.get('step');
    this.currentStepIndex = stepParam ? stepParam - 1 : 0;

    this.fortyPrinciplesUtilization$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.projectId        = +params.get('id');
        this.utilizationId    = +params.get('utilizationId');

        this.projectToolUtilizationActions.loadProjectTools(this.projectId);

        return this.store.select<FortyPrinciplesUtilization>(
          ['projectToolsMap', this.projectId, 'tools', this.utilizationId]
        ).pipe(
          tap(utilization => utilization && this.buildFormGroup(utilization))
        );
      })
    );
  }

要注意的主要事情是fortyPrinciplesUtilization$的初始化。在同一组件中，有任何调用projectToolUtilizationActions函数的函数，这些函数随后导致fortyPrinciplesUtilization$在Redux中被更新。

这里是将状态设置为complete的功能之一：

confirmComplete() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: {
        confirmTitle: 'Please, confirm',
        confirmContent: 'You are about mark this tool usage as complete. <br>' +
          'Once completed, all the data will not be editable anymore.<br>' +
          'Do you want to continue?',
        okButtonText: 'Complete'
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result === ConfirmResponse.YES) {
        this.projectToolUtilizationActions.completeToolUtilization(this.projectId, this.utilizationId);
      }
    });
  }

结果，状态将按预期更新。太好了！

但是，由于某种原因，当我是模板中的fortyPrinciplesUtilization$时：

<div class="forty-principles-utilization-container"
     *ngIf="fortyPrinciplesUtilization$ | async as fortyPrinciplesUtilization">
...
<button mat-raised-button
                  type="button"
                  color="accent"
                  class="step-button"
                  (click)="confirmComplete()"
                  [disabled]="isUtilizationCompleted(fortyPrinciplesUtilization)">
            Complete
          </button>
....

isUtilizationCompleted在哪里：

isUtilizationCompleted = (util: FortyPrinciplesUtilization) => util.status === ToolUtilizationStatus.FINISHED;

状态仍然是'IN_PROGRESS'（初始），即使redux中的状态是：

刷新后，所有功能当然都能按预期运行。

我想念什么？在应用程序的其他任何地方，我都在做同样的事情，并且一切都在更新。

更多信息

我还尝试了重构onInit函数，并避免嵌套可观察对象：

ngOnInit() {
    this.parameterActions.loadParameters();
    this.principleActions.loadPrinciples();
    this.domainPrincipleActions.loadDomainPrinciples();
    this.domainActions.loadDomains();
    this.matrixElementActions.loadMatrixElements();

    const stepParam = +this.route.snapshot.queryParamMap.get('step');
    this.currentStepIndex = stepParam ? stepParam - 1 : 0;

    this.projectId        = +this.route.snapshot.paramMap.get('id');
    this.utilizationId    = +this.route.snapshot.paramMap.get('utilizationId');

    this.projectToolUtilizationActions.loadProjectTools(this.projectId);

    this.fortyPrinciplesUtilization$ = this.store.select<FortyPrinciplesUtilization>(
      ['projectToolsMap', this.projectId, 'tools', this.utilizationId]
    ).pipe(
      tap(utilization => utilization && this.buildFormGroup(utilization))
    );

  }

结果完全相同。我想念什么？

Answer 1

您在哪里更新可观察的this.route.paramMap？

我认为this.fortyPrinciplesUtilization$不能改变，如果上面的观察结果没有触发任何改变。

在代码中我看不到发生这种情况的地方。

也许我缺少了一部分。

Redux状态更改后，Observable不会更新

1 个答案: