Angular 迭代中的角度动态CSS类

在下面的代码中，我想给每个答案选项一个不同的css类。Css类应该映射到答案

1,2,3,4

为

knock1，knock2，who-s，there

模板 我的角度有点生疏，所以我希望得到一个正确方向的提示

我目前正在尝试输入标记代码，但没有成功：

[ngClass]="{'knock1': answer.value === 1}"

---

除了无法设置输入单选元素的样式外，其他选项都很接近，其中一个选项是按如下方式设置label元素的样式：

<label class="radio-inline" *ngFor="let answer of answers"
     [ngClass]="{'knock1': answer.value === 1, , 'knock2': answer.value === 2}">
      <input type="radio" [(ngModel)]="selectedOption" name="inlineRadioOptions" 
             id="inlineRadio1" [value]="answer.value">
        {{answer.text}}
</label>

{{answer.text}

---

输入的单选元素（圆形）不能像div等其他HTML元素那样被随意设置样式。。但是如果你真的想，有一些解决办法，如果你真的需要，我可以提供给你。

你很接近，除了你不能设置输入单选元素的样式外，一个选项是设置标签元素的样式，如下所示：

<label class="radio-inline" *ngFor="let answer of answers"
     [ngClass]="{'knock1': answer.value === 1, , 'knock2': answer.value === 2}">
      <input type="radio" [(ngModel)]="selectedOption" name="inlineRadioOptions" 
             id="inlineRadio1" [value]="answer.value">
        {{answer.text}}
</label>

{{answer.text}

---

输入的单选元素（圆形）不能像div等其他HTML元素那样被随意设置样式。。但是如果你真的想，有一些解决方法，如果你真的需要，我可以提供给你。

我建议根据你的值命名你的CSS类，并使用字符串插值来呈现正确的类。这将使您的HTML保持相对干净和灵活

app.component.css

.answer-color-1{
背景色：#7CAE7A；
}
.答案-color-2{
背景色：#839073；
}
.答案-color-3{
背景色：#6E6362；
}
.答案-color-4{
背景色：#4E4A59；
}

app.component.html

{{answer.text}

---

另外，对于*ngFor循环中的多个元素，尽量不要使用相同的id。

我建议根据您的值命名CSS类，并使用字符串插值来呈现正确的类。这将使您的HTML保持相对干净和灵活

app.component.css

.answer-color-1{
背景色：#7CAE7A；
}
.答案-color-2{
背景色：#839073；
}
.答案-color-3{
背景色：#6E6362；
}
.答案-color-4{
背景色：#4E4A59；
}

app.component.html

{{answer.text}

---

另外，对于*ngFor循环中的多个元素，尽量不要使用相同的id。

是否仍会在输入上设置该类？我需要它用于selenium，而不是实际设置输入的样式。是的，它将被应用。尽管我会质疑仅仅为了测试而申请课程或ID的做法。你考虑过吗？有趣的一点。量角器是selenium的另一个包装器，我们决定直接在python中使用webdriver。对于角度应用程序，您一般会推荐量角器而不是python吗？我们的e2e测试需要以特定的方式针对我们的移动应用程序和web应用程序运行。我们正在应用特定的测试类，因为所谓的管理者在廉价的俄罗斯乙醇上像猿猴一样绕圈子跳舞，认为敏捷意味着我们每周更改95%的代码库。通过这种方式，我们可以确保我们的测试类不会消失，“管理层”明年可以再撕碎一打百万美元。正如@GordonWesterman所说的，尽管如此，该类仍将被应用，但我不知道您的真实意图/用例。对于测试量角器或直接测试selenium，我建议添加自定义属性，例如sele test on elements。是的，我的意思是，由您自己来确定名称对您有意义，@GordonWesterman这篇文章有代码示例。我想补充的一点很重要，就是在自定义属性名称前面加上

data-

前缀，例如

data您的自定义测试

要获得最佳实践并避免潜在问题，请参阅，是否会在输入上设置类？我需要它用于selenium，而不是实际设置输入的样式。是的，它将被应用。尽管我会质疑仅仅为了测试而申请课程或ID的做法。你考虑过吗？有趣的一点。量角器是selenium的另一个包装器，我们决定直接在python中使用webdriver。对于角度应用程序，您一般会推荐量角器而不是python吗？我们的e2e测试需要以特定的方式针对我们的移动应用程序和web应用程序运行。我们正在应用特定的测试类，因为所谓的管理者在廉价的俄罗斯乙醇上像猿猴一样绕圈子跳舞，认为敏捷意味着我们每周更改95%的代码库。通过这种方式，我们可以确保我们的测试类不会消失，“管理层”明年可以再撕碎一打百万美元。正如@GordonWesterman所说的，尽管如此，该类仍将被应用，但我不知道您的真实意图/用例。对于测试量角器或直接测试selenium，我建议添加自定义属性，例如sele test on elements。是的，我的意思是，由您自己来确定名称对您有意义，@GordonWesterman这篇文章有代码示例。我想补充的一点很重要，就是在自定义属性名称前面加上

数据-

，例如，自定义测试的

数据要获得最佳实践并避免潜在问题，请参阅，最简单的方法是在
应答
类中添加
输入类
属性，并使用
[ngClass]=“Answer.inputClass”
。最简单的方法是将
inputClass
属性添加到
Answer
类中，并使用
[ngClass]=“Answer.inputClass”
。我为您在最佳实践方面的巨大努力提供了答案，指出了潜在的错误和演示页面。我为您在最佳实践方面的巨大努力提供了答案，指出潜在的错误和演示页面。
<label class="radio-inline" *ngFor="let answer of answers"
     [ngClass]="{'knock1': answer.value === 1, , 'knock2': answer.value === 2}">
      <input type="radio" [(ngModel)]="selectedOption" name="inlineRadioOptions" 
             id="inlineRadio1" [value]="answer.value">
        {{answer.text}}
</label>