迭代中的角度动态CSS类

应用程序组件.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;
}

应用程序组件.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

很接近,只是不能设置输入单选元素的样式,一个选项是设置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>

输入的radio元素(圆形)不能像div等其他HTML元素那样使用noramly样式。。但如果你真的想,有解决办法,我可以提供给你,如果你真的需要。