Question

我创建了一个API，用于存储灯具及其特性的列表。我可以提取所有灯具的列表（可能已过滤）。

我还创建了一个单独的API，该API提供了到现有数据源的接口。该数据源记录了灯具使用情况的实例，API提供了自给定日期以来灯具使用时间的总和。由于每个灯具的日期不同，因此我必须进行单独的API调用。不幸的是，由于某些公司安全区域策略，我不能仅在后端进行合并，而必须在前端进行合并。

我的目标是创建一个Angular服务，该服务返回可观察到的灯具列表及其使用期限。

我已经尝试过使用mergeMap，并遍历夹具的结果列表，为正确的夹具调用服务，但这并没有成功，我认为它只是创建了可观察的对象，但没有订阅。订阅引发了另一个错误。我希望我保存了所有尝试，但下面将说明。

我正在组件中使用此代码调用此函数，并将其显示在表中：

getFixturesTable() {
    this.fixtureListService.getFixturesTable()
      .subscribe(fixtures => {
        this.fixtureSource = new MatTableDataSource<FixtureListModel>(fixtures);
        this.fixtureSource.paginator = this.paginator;
        this.fixtureSource.sort = this.sort;
      });
  }

这个没有得到我应用适配器的最终地图的列表，它只传递一个对象，而不传递数组，即使我返回的是灯具而不是灯具。错误是“ data.map不是函数”。

public getFixturesTable(
      fixtureSerial = '',
    ): Observable<FixtureListModel[]> {
      return this.fixtures.getFixtures(fixtureSerial).pipe(
        mergeMap((fixtures: any[]) => {
          fixtures.map((fixture: any) => {
            this.times.getSerialDuration(fixture.serial, fixture.latest_inspection).pipe(
              map(use => fixture.duration = use.duration)
            );
          });
          return fixtures;
        }),
        map((data: any[]) => {
          console.log(data);
          return data.map(item => this.fixtureListAdapter.adapt(item));
          }
        )
      );
    }

这实际上执行了api调用，但它们来得很晚，并且从未应用到Fixture对象，至少据我所知。我认为这与在地图中使用.subscribe函数有关，但是我读到这可能是不好的做法。

public getFixturesTable(
      fixtureSerial = '',
    ): Observable<FixtureListModel[]> {
      return this.fixtures.getFixtures(fixtureSerial).pipe(
        mergeMap((fixtures: any[]) => {
          console.log('looping');
          fixtures.map((fixture: any) => {
            console.log(fixture);
            this.times.getSerialDuration(
              fixture.serial,
              fixture.latest_inspection,
            ).subscribe( agg =>
              fixture.duration = agg.duration
            );
            console.log(fixture);
            return fixture;
          });
          return fixtures;
        }),
        map((data: any[]) => data.map(item => this.fixtureListAdapter.adapt(item))
        ));
    }

我希望我已经保存了一些其他接近的尝试，但不幸的是，这些尝试都浪费了时间。

我真正想做的是使用Observables和HttpClient执行“内部联接”。我想找到一种再次执行此操作的通用方法，但是在这种情况下，我只需要向“夹具”对象添加“ fixtures.duration”字段，然后将其显示在表中即可。

Answer 1

所以我让它起作用了，我想我可能一直在看错结果。无论哪种方式，我都不喜欢地图内的订阅呼叫，除非那是最好的方式。

public getFixturesTable(
      fixtureSerial = '',
    ): Observable<FixtureListModel[]> {
      return this.fixtures.getFixtures(fixtureSerial).pipe(
        map((data: any[]) => data.map(item => this.fixtureListAdapter.adapt(item))),
        map(fxs => {
          fxs.map(fixture => {
            this.times.getSerialDuration(
              fixture.serial.toString(),
              fixture.latestInspection)
              .subscribe(time => fixture.usedTime = time.duration);
          });
          return fxs;
        }),
        );
    }

Angular HttpClient“内部联接”单独的API调用

1 个答案: