如何在角度中使用ngFor同时迭代两个数组？

Question

我必须将对象作为来自 node.js 的有效负载进行排列，并将其存储在不同的变量中并进行迭代，但 *ngFor 仅迭代第一个循环而不是第二个循环，因此如何在同一个 div status.component.html 中迭代

<div *ngFor="let payload1 of payload1;let payload2 of payload2;">
  <h4>{{payload2.username}}</h4>
  <h4>{{payload1.date}}</h4>
</div>

status.component.ts

payload1 = [];
payload2 = [];

ngOnInit() {
  this.statusService.getStatusDetails(this.statusObj).subscribe(
    (data) => {
      if(data.status == 26){
        this.payload1 = data.payload[0];
        this.payload2 = data.payload[1];
      }
    }
 );
}

Answer 1

我认为如果您的有效载荷长度相同并且顺序匹配（您的问题似乎暗示它确实如此），这应该有效

<div *ngFor="let p of payload1;let i = index">
  <h4>{{payload2[i].username}}</h4>
  <h4>{{payload1[i].date}}</h4>
</div>

Answer 2

为什么不把它做成一个数组呢？

payload = [];
ngOnInit() {
  this.statusService.getStatusDetails(this.statusObj).subscribe(
    (data) => {
      if(data.status == 26){
        this.payload = data.payload[0]
          .map((item, index) => ({ ...item, ...data.payload[1][index] }));
      }
    }
 );
}

证明它有效的片段：

payload = [];
ngOnInit() {
  this.statusService.getStatusDetails(this.statusObj).subscribe(
    (data) => {
      if(data.status == 26){
        this.payload = data.payload[0]
          .map((item, index) => ({ ...item, ...data.payload[1][index] }));
      }
    }
 );
}

如果数组长度不同，您甚至可以构建此合并的有效负载。

const d1 = [
  { id: 0 },
  { id: 1 },
];

const d2 = [
  { name: '0' },
  { name: '1' },
];

const d3 = d1.map((item, index) => ({ ...item, ...d2[index] }));

console.log(d3);

角度版本：

payload = [];
ngOnInit() {
  this.statusService.getStatusDetails(this.statusObj).subscribe(
    (data) => {
      if(data.status == 26){

        const longest = data.payload[0].length > data.payload[1].length ? 
          data.payload[0] : data.payload[1];
        const shortest = data.payload[0].length <= data.payload[1].length ? 
          data.payload[0] : data.payload[1];

        this.payload = longest
          .map((item, index) => ({ ...item, ...shortest[index] }));
      }
    }
 );
}