为单个ngrx-数据服务调用两次订阅geting

Question

我对ngrx数据非常陌生，我正在尝试检测为什么加载几个记录要花这么长时间

下面是我如何订阅ngrx-数据实体：

    this.subscriptions.push(this.mileageTrackingManagmentService.entities$.subscribe(data => {
      console.log('>>subscribe mileageTrackingManagmentService - ' + new Date());
      let tempDataset = data || [];
      this.calculateTotalMileageForMultipleDays(tempDataset);
      this.mileageTrackingManagment = tempDataset;
      this.filteredMileageTrackingManagement = this.mileageTrackingManagment;
      //this.setFilter();
      //this.cdRef.detectChanges();
    }));

下面是我如何调用ngrx-data服务来发出http请求。

  private loadMileageTracking() {
    if (this.domain) {
      console.log('loadMileageTracking');
      if (this.dateOption == DateOptions.Day && this.selectedResource) {
        this.mileageTrackingService.getTrackingByResourceIdAndDomainId(this.startDate, this.selectedResource.resourceId, this.domain.id);
      } else {
        console.log('getManagment');
        this.mileageTrackingManagmentService.getManagment(this.startDate, this.endDate, this.dateOption, this.domain.id)
      }
    }
  }

从我在控制台中看到的内容来看，订阅反应逻辑是gettig调用两次，差15秒。在“网络”选项卡中，我可以看到这两个请求都是成功的，并且包含数据。

我做错了检测更改来显示数据，这是标准行为吗？

​

我试过的东西

• entities$.pipe(skip(1)).subscribe...
• entities$.pipe(take(1)).subscribe...

没有预期的工作，因为只显示给定的请求，而忽略任何其他请求。

我不想通过请求忽略返回的数据，我想知道为什么ngrx-data或者我的代码要为单个调用ngrx-data服务执行两个http请求。

下面是服务的实现方式

export class MileageTrackingManagmentService extends EntityCollectionServiceBase<MileageTrackingManagment> {

    constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
        super('MileageTrackingManagment', serviceElementsFactory);
    }

    public getManagment(startDate: Moment, endDate: Moment, grouping: DateOptions, domainId?: string): Observable<MileageTrackingManagment[]> {
        this.clearCache();

        return this.getWithQuery(MileageCommon.buildQuery(startDate, endDate, grouping, domainId));
    }
}

我也检查过其他类似的问题，没有多少运气。

• Angular & NgRx-Data update & subscription issue
• ngrx/data entity data service

Answer 1

我相信这就是正在发生的事情：entities$.subscribe(在entities$当前值下产生一次，然后每次entities$的值发生变化时再一次。

当订阅发生时(在这一行)

 ... (this.mileageTrackingManagmentService.entities$.subscribe(data => ...

当前entities$值为成品率；

然后调用服务函数loadMileageTracking。

然后经过一段时间(每张图15s)，FE接收到数据；

这将导致与实体相关的存储区中的数据发生更改，因此...entities$.subscribe(data => ...再次产生。

如果在后端处理服务的http请求时，需要订阅而不产生结果，我建议您向存储区添加一个属性，以指示值是否正在加载。

让我称它为loading，并假设您在服务中有一个可观察的loading$，以便进行讨论。然后你就可以这样做：

this.mileageTrackingManagmentService.loading$.pipe(filter(loading => !loading),take(1)).subscribe(() => {
{
  this.subscriptions.push(this.mileageTrackingManagmentService.entities$.subscribe(data => {
    let tempDataset = data || [];
    this.calculateTotalMileageForMultipleDays(tempDataset);
    this.mileageTrackingManagment = tempDataset;
    this.filteredMileageTrackingManagement = this.mileageTrackingManagment;
  }));
});

在本例中，还需要将loading属性值的处理添加到还原器中。该操作将其值设置为true，与成功和失败相关的操作将其设置为false。

Answer 2

如果您在应用程序范围内对返回的数据所做的一切都如预期的那样工作，并且您只需要在给定的页面/上下文中使用一次数据，那么您可以尝试向import { take } from 'rxjs/operators';订阅添加一个import { take } from 'rxjs/operators';，以确保您只得到发出的第一个值。参见https://rxjs.dev/api/operators/take的更多信息