如何在Angular中使用*ngFor交替显示两个数组对象的数据？

问题分析 #

你当前的代码会先遍历完arrayobj1的所有元素，再遍历arrayobj2，导致顺序不符合预期。同时模板中直接写obj.name不会解析为变量值，需要用Angular的插值表达式{{}}。

方法一：组件层合并为交替数组 #

在组件的TypeScript代码中生成一个交替合并后的数组，再在模板中遍历这个数组：

1. 组件.ts文件代码：

arrayobj1 = [{name:"hello1",age:"12"},{name:"hello2",age:"115"}];
arrayobj2 = [{name:"hello3",age:"12"},{name:"hello4",age:"12"}];
alternatedArray: any[] = [];

ngOnInit() {
  const maxLen = Math.max(this.arrayobj1.length, this.arrayobj2.length);
  for (let i = 0; i < maxLen; i++) {
    // 先加入第一个数组的当前元素（如果存在）
    if (i < this.arrayobj1.length) {
      this.alternatedArray.push(this.arrayobj1[i]);
    }
    // 再加入第二个数组的当前元素（如果存在）
    if (i < this.arrayobj2.length) {
      this.alternatedArray.push(this.arrayobj2[i]);
    }
  }
}

2. 模板.html代码：

<tr *ngFor="let obj of alternatedArray">
  <td>{{ obj.name }}</td>
</tr>

方法二：模板层直接按索引交替渲染 #

如果不想修改组件逻辑，可以在模板中通过索引遍历，动态渲染两个数组的元素：

1. 组件.ts文件添加长度计算：

arrayobj1 = [{name:"hello1",age:"12"},{name:"hello2",age:"115"}];
arrayobj2 = [{name:"hello3",age:"12"},{name:"hello4",age:"12"}];
maxLen: number;

ngOnInit() {
  this.maxLen = Math.max(this.arrayobj1.length, this.arrayobj2.length);
}

2. 模板.html代码：

<!-- 基于最大长度生成循环索引 -->
<ng-container *ngFor="let _ of [].constructor(maxLen); let i = index">
  <!-- 渲染第一个数组的当前元素 -->
  <tr *ngIf="i < arrayobj1.length">
    <td>{{ arrayobj1[i].name }}</td>
  </tr>
  <!-- 渲染第二个数组的当前元素 -->
  <tr *ngIf="i < arrayobj2.length">
    <td>{{ arrayobj2[i].name }}</td>
  </tr>
</ng-container>

注意事项 #

• 必须使用{{ obj.name }}替代直接写obj.name，Angular才能解析并显示对象的属性值。
• 两种方法都考虑了数组长度不一致的情况，比如如果其中一个数组更长，剩余元素会继续渲染。

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