如何使用Angular从两个表中获取数据并将其显示在HTML中？

// 第一个服务，获取第一个表的数据
@Injectable()
export class Table1Service {
  constructor(private http: HttpClient) {}

  getDataFromTable1(): Observable<any> {
    return this.http.get('API_URL/table1');
  }
}

// 第二个服务，获取第二个表的数据
@Injectable()
export class Table2Service {
  constructor(private http: HttpClient) {}

  getDataFromTable2(): Observable<any> {
    return this.http.get('API_URL/table2');
  }
}

// 组件
@Component({
  selector: 'app-data-display',
  template: `
    <div>
      <h2>Data from Table 1:</h2>
      <ul>
        <li *ngFor="let data of table1Data">{{ data }}</li>
      </ul>
  
      <h2>Data from Table 2:</h2>
      <ul>
        <li *ngFor="let data of table2Data">{{ data }}</li>
      </ul>
    </div>
  `,
})
export class DataDisplayComponent implements OnInit {
  table1Data: any[];
  table2Data: any[];

  constructor(
    private table1Service: Table1Service,
    private table2Service: Table2Service
  ) {}

  ngOnInit() {
    this.table1Service.getDataFromTable1().subscribe((data) => {
      this.table1Data = data;
    });

    this.table2Service.getDataFromTable2().subscribe((data) => {
      this.table2Data = data;
    });
  }
}

// 在模块中声明服务和组件
@NgModule({
  declarations: [DataDisplayComponent],
  providers: [Table1Service, Table2Service],
})
export class AppModule {}