Question

在下面的代码中，我想给每个答案选项一个不同的CSS类。 CSS类应映射为以1,2,3,4的形式答复knock1,knock2,who-s,there。

模板

    <label *ngFor="let answer of answers">
      <input type="radio" [(ngModel)]="selectedOption" [value]="answer.value">
        {{answer.text}}
    </label>

打字稿

this.answers = [
  new Answer(value: 4, text: "Race"),
  new Answer(value: 3, text: "Con"),
  new Answer(value: 2, text: "dit"),
  new Answer(value: 1, text: "ion")
];

我对Angular有点生锈，所以我希望在正确的方向上有所提示。

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

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

Answer 1

我建议根据您的值命名CSS类，并使用字符串插值法渲染正确的类。这样可以使您的HTML保持相对干净和灵活。

app.component.css

.answer-color-1 {
  background-color: #7CAE7A;
}

.answer-color-2 {
  background-color: #839073;
}

.answer-color-3 {
  background-color: #6E6362;
}

.answer-color-4 {
  background-color: #4E4A59;
}

app.component.html

<label class="radio-inline" *ngFor="let answer of answers">
  <span class="answer-color-{{answer.value}}">
    <input type="radio" [(ngModel)]="selectedOption" name="inlineRadioOptions" [value]="answer.value" >
      {{answer.text}}
  </span>
</label>

DEMO

也请不要对* ngFor循环中的多个元素使用相同的ID。

Answer 2

除了不能设置输入单选元素的样式之外，您很亲近，一种选择是设置标签元素的样式，如下所示：

<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>

输入单选元素（圆形）不能像div等其他HTML元素那样具有特殊的样式。但是如果您确实需要，可以解决，我可以为您提供帮助。

Angular-迭代中的动态CSS类

模板

打字稿

2 个答案: