角度&&NgRx-数据更新和订阅问题 [英] Angular & NgRx-Data update & subscription issue

问题描述

我使用的是ANGLE 11&；NgRx-Data 10.1.2。我正在使用智能组件/哑巴组件模式。

在我的"列表"视图中，当我选择一个项目时，我会路由到传递项目ID的详细页。

在我的详细信息页面中，我订阅了实体服务getByKey()

this.siteEntityService.getByKey(this.siteId).subscribe((site: Site) => {
  this.site = site;
});

这是SiteEntiyService：

import { Injectable } from '@angular/core';
import { EntityCollectionServiceBase, EntityCollectionServiceElementsFactory } from '@ngrx/data';
import { Site } from 'src/app/models/site.model';

@Injectable({ providedIn: 'root' })
export class SiteEntityService extends EntityCollectionServiceBase<Site> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super('Site', serviceElementsFactory);
  }
}

当单击‘编辑’时，我以模式打开编辑组件：

openEditModal(){
  this.showingModal = true;

  this.modalRef = this.modalService.open(SiteEditShellComponent);
  this.modalRef.componentInstance.site = this.site;
}

在编辑组件中，在提交表单时单击：

  formSubmitted(form: any) {
    let updatedSite = { ...this.site };
    updatedSite.name = form.siteName;

    this.siteEntityService.update(updatedSite).subscribe((x: Site) => {
      this.site = x;
      this.activeModal.dismiss();
    })
  }

更新后，如果我调查商店，我可以看到实体已正确更新，但是，在模式关闭后，显示页面上的订阅不会更新，尽管商店(和数据库)正在更新。

那么，我错在哪里呢？如何使显示页刷新数据？

编辑以回应@Fibre的回答：

现在可以工作了，但是由于订阅返回的是项目的数组，这意味着我必须在数组中搜索正确的项，这看起来不太理想。

  loadSite() {
    let sites$ = this.siteEntityService.store.select((new EntitySelectorsFactory().create<Site>('Site')).selectEntities);

    this.subscriptions.add(
      sites$.pipe(
        map((sites: Site[]) => {
          return sites.find((site: Site) => site.id === this.siteId);
        })
      ).subscribe((site: Site) => {
        this.site = site;
      })
    );

    this.siteEntityService.getByKey(this.siteId).subscribe((site: Site) => {
      this.site = site;
    });
  }

推荐答案

从后端检索数据时将仅触发一次：

this.siteEntityService.getByKey(this.siteId).subscribe((site: Site) => {
  this.site = site;
});

该方法连接到数据检索方法，而不是您正在查找的实体存储区。

您应该创建一个直接连接到存储区的可观察对象(ngrx/data为您提供了一个EntitySelectorsFactory以便能够这样做)，并侦听更改。

// this is gonna fire every time you update the store with new 'Site' items
sites$ = this.store.select((new EntitySelectorsFactory().create<Site>('Site')).selectEntities);

sites$.subscribe((sites: Site[]) => {
  this.site = sites.find(s => s.id === this.siteId);
});

// this will trigger the initial load
this.siteEntityService.getByKey(this.siteId);

显然，订阅应该在组件销毁时终止，但为简洁起见跳过了这一部分。

这篇关于角度&&NgRx-数据更新和订阅问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！