css类动态

我想根据从后端检索到的数据动态设置文本的颜色。例如，如果响应为：

 "names": [
            {
                "name": "apple",
            },
            {
                "name": "banana",
            },

我想有红色的文字苹果，黄色的文字香蕉。 如何动态地为该文本添加颜色

这是我的html：

<div *ngFor="let data of names">
    <span>{{data.name}}</span>
</div>

---

它将与此非常相似：

<div *ngFor="let data of names ;let i = index">
<h6 *ngIf="i%2 == 0" style="color: red" >{{data.name}}</h6>
<h6 *ngIf="i%2 != 0" style="color: yellow" >{{data.name}}</h6>
</div>

{{data.name}
{{data.name}

颜色=[“红色”、“绿色”、…]；
{{data.name}

您的HTML如何？请使用ngClass指令。如果您可以粘贴HTML代码或组件，则可以对其进行修改，以显示如何完成。ngClass应该为您完成。首先，您应该有一个[配置/对象/字典/替换为任何合适的]将您的名字映射到应用程序的某个实际CSS类。然后在包含文本的元素上应用相应的类，如span。为了给你更多的细节，我们需要你的部分提供更多的细节。我编辑了问题@bugsWould，如果你的后端只提供颜色或css类不是最好的，那么你可以在后端/数据库中创建颜色。我不会有相同的名称。数据可能会有所不同。更具体地说，我希望第一个名字是红色的，第二个是黄色的。好的。你的数组中只有两个数据，或者数字是不固定的吗？我有10个。好的。你可以使用索引。偶数是红色，奇数是黄色。修改了代码我有10个名字和10种颜色。我初始化了一个数组颜色，就像你说的和尝试的那样。它表示无法读取未定义的属性“0”。

<div *ngFor="let data of names ;let i = index">
<h6 *ngIf="i%2 == 0" style="color: red" >{{data.name}}</h6>
<h6 *ngIf="i%2 != 0" style="color: yellow" >{{data.name}}</h6>
</div>

color = ["red", "green", ..];

<div *ngFor="let data of names;let i=index">
    <span [style.color]="color[i]">{{data.name}}</span>
</div>