[英]How to iterate two array at same time using ngFor in angular?
I have to array objects as payload which comes from node.js, and i store it in different variables and iterate but *ngFor iterate only first loop not second so how to itterate both at same div status.component.html 我必须将对象数组作为来自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 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];
}
}
);
}
I think this should work if your payloads are the same length and ordered to match (which your question seems to imply it does) 我认为,如果您的有效载荷长度相同且顺序匹配(您的问题似乎暗示确实如此),则此方法应该有效
<div *ngFor="let p of payload1;let i = index">
<h4>{{payload2[i].username}}</h4>
<h4>{{payload1[i].date}}</h4>
</div>
Why not make a single array out of that ? 为什么不从中制作单个阵列呢?
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] }));
}
}
);
}
Snippet proving it works : 片段证明它有效:
const d1 = [ { id: 0 }, { id: 1 }, ]; const d2 = [ { name: '0' }, { name: '1' }, ]; const d3 = d1.map((item, index) => ({ ...item, ...d2[index] })); console.log(d3);
You can even build this merged payload if the arrays aren't the same length. 如果阵列的长度不同,您甚至可以构建此合并的有效负载。
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);
Angular version : 角版本:
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] }));
}
}
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.