如何在Angular中使用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] }));
      }
    }
 );
}

片段證明它有效：

 const d1 = [ { id: 0 }, { id: 1 }, ]; const d2 = [ { name: '0' }, { name: '1' }, ]; const d3 = d1.map((item, index) => ({ ...item, ...d2[index] })); console.log(d3); 

如果陣列的長度不同，您甚至可以構建此合並的有效負載。

 const d1 = [ { id: 0 }, { id: 1 }, ]; const d2 = [ { name: '0' }, { name: '1' }, { name: '2' }, ]; const longest = d1.length > d2.length ? d1 : d2; const shortest = d1.length <= d2.length ? d1 : d2; const d3 = longest.map((item, index) => ({ ...item, ...shortest[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] }));
      }
    }
 );
}