Angular 5合并两个接口返回数组并通过*ngFor循环展示

我来帮你搞定这个问题！在Angular 5里合并两个异步获取的数组并通过单个*ngFor展示，分几步就能轻松实现，详细步骤如下：

1. 等待两个异步请求完成后再合并数组 #

因为你是通过两个GET请求异步获取数据，不能直接在单个请求的订阅里合并（否则可能出现其中一个请求还没返回就合并的情况）。推荐用RxJS的forkJoin来等待两个请求都完成后再处理：

首先在组件中导入forkJoin：

import { forkJoin } from 'rxjs/observable/forkJoin';

然后定义两个请求的Observable（如果其中一个是本地固定数据，也可以直接返回可观察对象）：

// 第一个请求：获取包含fileName、icon、fullPath、image的数组
getMainData() {
  return this.http.get('你的第一个API地址');
}

// 第二个请求：获取你提到的servers3相关数组，如果是本地数据就直接返回可观察对象
getSubData() {
  // 如果是API请求就用http.get，本地数据的话用Observable.of
  return Observable.of(this.servers3);
  // 若为API请求则替换为：return this.http.get('你的第二个API地址');
}

接着在组件初始化方法（比如ngOnInit）里合并数组：

public tableData: any[] = []; // 提前初始化为空数组，避免渲染报错

ngOnInit() {
  forkJoin(this.getMainData(), this.getSubData()).subscribe(
    ([mainArray, subArray]) => {
      // 两种合并方式任选其一
      // 方式1：使用concat方法
      this.tableData = mainArray.concat(subArray);
      // 方式2：使用扩展运算符，效果一致
      // this.tableData = [...mainArray, ...subArray];
    },
    error => {
      console.error('数据获取失败:', error);
    }
  );
}

2. 用*ngFor渲染表格并处理缺失字段 #

由于两个数组的结构不完全一致（比如servers3只有sub和subDesc），渲染时可以用||设置默认值，避免显示undefined：

<table border="1">
  <thead>
    <tr>
      <th>fileName</th>
      <th>icon</th>
      <th>fullPath</th>
      <th>sub</th>
      <th>subDesc</th>
      <th>image</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{ item.fileName || '-' }}</td>
      <td>{{ item.icon || '-' }}</td>
      <td>{{ item.fullPath || '-' }}</td>
      <td>{{ item.sub || '-' }}</td>
      <td>{{ item.subDesc || '-' }}</td>
      <td>
        <!-- 如果image是图片URL，就渲染图片，否则显示默认值 -->
        <img *ngIf="item.image" [src]="item.image" alt="内容图片" style="width:50px;" />
        <span *ngIf="!item.image">-</span>
      </td>
    </tr>
  </tbody>
</table>

这样就能完美实现两个数组合并后，通过单个*ngFor循环在表格中展示所有数据啦！

内容的提问来源于stack exchange，提问作者sagar rokade