Javascript ul li环路中有多个阵列

我希望以ul/li显示数据，因此我通过html中的循环获取数据，如：

我有两个数组，其中：

  $mainarray = [{"Name":"data1","count":9},{"Name":"data2","count":10},
 {"Name":"data3","count":4},{"Name":"4","count":20}];


 $color = ['red','pink','green','yellow','black'];
 $color = ['red','pink','green','yellow','black'];

我在主阵列中循环，如下所示，其工作良好：

<ul style="list-style-type:circle; padding: 0px !important; font-size:22px;">
<li ng-repeat="item in mainarray " style="margin-bottom: 10px;"; >
    <span style=" font-size: 16px; ">{{ item.name }}</span>
</li>
</ul>

我已经尝试了多重循环，但它不工作

---

有什么线索吗？

您可以使用

$index

<span style=" font-size: 16px; ">{{ item.name }} -> {{ color[$index] }}</span>

{{item.name}->{{color[$index]}

可能重复感谢，但如何将此颜色放置在样式中？当我使用style=“color={{{color[$index]}}时，它不起作用“@CodeWithCoffee你可以试试

ng style

上面链接中的这个答案用简单的风格。谢谢@gurvinder

<span style=" font-size: 16px; ">{{ item.name }} -> {{ color[$index] }}</span>