3

我已经看到了一些与此类似的问题，但我仍在努力解决我在特定应用程序中遇到的错误。我正在使用 NgRx 和 Angular。

.html 文件

  • 在组件的.html文件中，我有如下内容。我曾经async从selectedOverlayLayers$observable 中获取最新值。正如您可能已经猜到的那样，这个想法是抓取用户选择的图层并将它们显示在列表中。
  • alterLayers()打开一个对话框，用户可以在其中更改“选择”哪些图层
<div class="body-wrapper">
  <div>
    <button mat-raised-button class="add-layers" (click)="alterLayers()">Alter Layers</button>
  </div>
  <div class="active-layers">
    <div *ngFor="let layer of (selectedOverlayLayers$ | async)" class="active-layer">
      <p>{{ layer.name }}</p>
    </div>
  </div>
</div>

组件.ts 文件

  • component.tshasselectedOverlayLayers$从 NgRx 存储中获取所选图层值的数组，如下所示：
selectedOverlayLayers$ = this.store.pipe(select(selectedOverlayLayers));
  • 该组件还控制打开对话框并使用从显示给用户的对话框中收集的结果，用户可以在其中选择他们想要查看的图层。一旦用户点击提交，我们使用result触发一个用新值更新 store 的操作。
alterLayers () {
  const dialogOpenSubscription = this.selectedOverlayLayers$.subscribe((selectedLayers) => {
    const layersDialog = this.dialog.open(LayersDialogComponent, {
      maxHeight: '90vh',
      data: {
        allPossibleLayers: this.groupedLayers.getValue(),
        selectedLayers: selectedLayers
      }
    });
    const layersDialogSubscription = layersDialog.afterClosed().subscribe(result => {
      if (result) {
        this.store.dispatch(updateSelectedOverlayLayers({ selectedLayers: result }));
      }
    });
    this.subscriptions.push(layersDialogSubscription);
    this.cdRef.markForCheck();
  })
  this.subscriptions.push(dialogOpenSubscription);
}

问题：

  • 使用表示所选图层的新列表的新数组正确更新存储
  • 但是，直到我单击组件本身中的选项卡或其他内容后，UI 才会更新，然后才会在列表中正确显示层。

我尝试添加private ngZone: NgZone到构造函数并运行this.ngZone.run(() => this.store.dispatch(updateSelectedOverlayLayers({ selectedLayers: result })，但这对我不起作用。

4

0 回答 0