angular - Angular HttpClient“内部连接”单独的 API 调用

问题描述

我创建了一个 API，用于存储有关它们的装置和特征的列表。我可以拉出所有灯具的列表（可能已过滤）。

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

我的目标是创建一个 Angular 服务，它返回一个可观察的固定装置列表以及它们的使用时间。

我试过使用mergeMap，并循环遍历结果列表，为正确的fixture调用服务，但这从未调用过，我认为它只创建了observable，但没有订阅。订阅引发了不同的错误。我希望我保存了所有尝试，但我将在下面展示我所拥有的。

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

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 调用，但它们来晚了，并且永远不会被应用到夹具对象上，至少据我所知。我认为这与在地图中使用 .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”字段添加到夹具对象，然后将其显示在表格中。

标签： angularangular-httpclient

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 - Angular HttpClient“内部连接”单独的 API 调用

问题描述

解决方案

推荐阅读