如何在 Angular/RxJS 中合并两个 observables？

Question

在我的服务中有这些方法：

  getMap(): any {
    return this.http.get(`someURL`);
  }

  getAssets(): any {
    return this.http.get(`someURL`);
  }

在我的组件中，我这样使用它们：

  ngOnInit() {
    this.myService.getMap().subscribe(data => {
      this.map = data; // Returns ["map-1.svg", "map-0.svg"]
    });

    this.systemMapService.getAssets().subscribe(data =>  {
        this.assets = data; // Returns ["map-mapping-0.json", "map-mapping-1.json"]
    });
  }

在我的模板中，我想这样使用它：

<mat-tab-group mat-align-tabs="end">
  <div *ngFor="let item of assets; let i = index">
    <mat-tab label="{{i}}">
      <div class="container">
        <div class="map">
          <img id="img_equipment" [src]="apiUrl + '/path/to/svg/' + item">
          <a *ngFor="let link of map"
             title="{{ link.title }}"
             class="ink"
             [ngStyle]="{ left: link.left, top: link.top, width: link.width }">
          </a>
        </div>
      </div>
    </mat-tab>
  </div>
</mat-tab-group>

我提供了调用的 return 值作为代码中的注释。

例如，文件map-0.svg应该使用这个JSON作为映射map-mapping-0.json。文件map-1.svg然后依次是这个JSON文件map-mapping-1.json.

.. 调用 return 的数组是否必须排序才能工作？因为不幸的是，它们目前正在 return 后端未排序。

Answer 1

从您的模板和描述来看，您的数据应该采用何种形式才能使这对您来说最简单。无论如何，我的本能是转换您的数据，直到它很容易被您的模板使用，然后使用 angular 的异步管道。

// I'm making this an array of strings tuples, but it can 
// be whatever best serves your purpose
displayData = Observable<Array<[string, string]>>;
ngOnInit() {
 
  this.displayData = forkJoin({
    mapData: this.myService.getMap(),
    mapAssets: this.systemMapService.getAssets()
  }).pipe(
    map(({mapData, mapAssets}) => {
      const formattedData = mapData.map(mapInstance => {
          // You're going to have to define this function yourself
          // to effective organsize/sort/whatever your data. 
          const assetInstance = this.extractMapAsset(mapAssets, mapInstance);
          return [mapInstance, assetInstance];
      });
      return formattedData;
    })
  );
}

// In template
<div *ngFor='let tupleData of displayData | async'>
    The map is called {{tupleData[0]}} 
    and its assetJson is called {{tupleData[1]}}
</div>

这是一个大大简化的示例，但它具有基本结构。您加入并格式化您的数据，然后将其显示在您的视图中。在这个例子中，它只是一个字符串元组，但它可以是任何你认为可以嵌套的 ngFor* 调用来显示你喜欢的数据。

如何在 Angular/RxJS 中合并两个 observables？

How to merge two observables in Angular/RxJS?

rxjs

typescript

angular-material

angular

rxjs-observables