订阅一次 ngrx-data 服务调用被调用两次

Question

我是 ngrx-data 的新手，我正在尝试检测为什么加载几条记录需要这么长时间

这是我订阅 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)
      }
    }
  }

据我在控制台中看到的，订阅反应逻辑被调用了两次，相差 15 秒。在网络选项卡中，我可以看到两个请求都成功并包含数据。

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

我尝试过的东西

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

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

我不是在寻找一种方法来忽略请求返回的数据，我想知道为什么 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));
    }
}

我也查过其他类似的问题，运气不太好

ngrx/data entity data service

Answer 1

如果您在整个应用程序范围内对返回数据执行的所有其他操作都按预期工作，并且您只需要给定 page/context 中的数据一次，您可以尝试将 pipe(take(1)) 添加到订阅 [使用 import { take } from 'rxjs/operators';]，以确保您得到的只是发出的第一个值。在 https://rxjs.dev/api/operators/take

Answer 2

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

订阅发生时（在这一行）

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

当前entities$值为yield；

然后调用服务函数loadMileageTracking。

然后一段时间过去了（每张照片 15 秒），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。

订阅一次 ngrx-data 服务调用被调用两次

Subscribe geting called twice for a single ngrx-data service call

angular

ngrx

angular-ngrx-data