解决这个问题的方法是使用RxJS的操作符，例如forkJoin或combineLatest来组合多个API调用，以便在初始化时只进行一次调用。

下面是一个使用forkJoin解决这个问题的代码示例：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data1: any;
  data2: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 定义多个API调用
    const api1$ = this.http.get('api1-url');
    const api2$ = this.http.get('api2-url');

    // 使用forkJoin组合多个API调用
    forkJoin([api1$, api2$]).subscribe(([res1, res2]) => {
      this.data1 = res1;
      this.data2 = res2;
    });
  }
}

在上述代码中，我们首先定义了两个API调用 api1$和api2$，然后使用forkJoin将它们组合起来。在forkJoin的subscribe回调函数中，我们获取到了每个API调用的响应结果，并将其分配给对应的变量data1和data2。

这样，无论有多少个下标需要调用相同的API，我们都只需要在初始化时进行一次调用，避免了重复加载的问题。