如何在角度模板中并排打印两个数组？

Question

强文本

我有两个要在角度模板中彼此相邻打印的数组。我尝试在div和span内使用ng，但没有得到想要的输出。 A = [1,2,3,4] B = [A，B，C，D]

使用ngFor的实际结果使用div和span：

使用Div：

1

2

3

4

A

B

C

D

使用跨度：1 2 3 4 A B C D

所需的输出：

1 A

2 B

3 C

4 D

我想获得如上的结果，请帮忙。

Answer 1

只需在第二个数组中使用“索引”

<div *ngFor="let item of a;let i=index>
{{item}}{{b[i]}}
</div> 

Answer 2

您还可以考虑使用.map()创建2D数组，然后使用带有*ngFor的结果数组：

JS：

let A = [1, 2, 3, 4];
let B = ['A', 'B', 'C', 'D'];
let C = A.map((v, i) => [v, B[i]]);

HTML：

<div *ngFor="let item in C">
    {{item[0]}} {{item[1]}}
</div>

Answer 3

* ngFor提供了获取数组索引的选项。同样，可以使用其他几个导出的值。有关更多详细信息，请参见Angular Documentation。

解决方案：

<div *ngFor="let value of firstArray; let i = index">{{value}} {{secondArray[i]}}</div>