问题描述
我使用的是 Angular 11 和 NgRx-Data 10.1.2。我正在使用智能组件/哑组件模式。
在我的“列表”视图中,当我选择一个项目时,我会路由到传递项目 ID 的详细信息页面。
在我的详细信息页面中,我订阅了实体服务 getByKey()
this.siteEntityService.getByKey(this.siteId).subscribe((site: Site) => {
this.site = site;
});
这是 SiteEntityService:
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();
})
}
更新后,如果我调查商店,我可以看到实体已正确更新,但是,模式关闭后,显示页面上的订阅不会更新,尽管商店(和数据库)更新中。
根据@Fiber 的回答进行编辑:
它现在可以工作了,但是由于订阅正在返回一个项目数组,这意味着我必须在该数组中搜索正确的项目,这似乎并不理想。
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;
});
该方法连接到数据检索方法,而不是您正在寻找的实体存储。
您应该创建一个直接连接到商店的 observable(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);
显然订阅应该在组件销毁时终止,但为了简洁跳过了那部分。