Question

我正在创建一个测验应用，其角度为6（图像为问题）和4个选项，并且我需要在“红色”和“绿色”之间更改用户单击的选项的颜色因为这是对还是错的选择。这是我的生成选项的循环：

 <div class="quiz_wrapper">
<div class="options">
  <ul>
    <li *ngFor="let Answer of displayedQuizAnswers" (click)="onChoseAnswer(Answer)" [ngStyle]="answerStyle">
      <a>{{Answer}}</a>
    </li>
  </ul>
</div>

当我借助“ onChoseAnswer（Answer）”更改“ answerStyle”时，所有选项都会更改。有什么方法可以使我从生成的元素中定位特定的元素样式？

Answer 1

如果要为特定元素使用它，则需要将该属性单独添加到对象Answer中。

 <li *ngFor="let Answer of displayedQuizAnswers" (click)="onChoseAnswer(Answer)" [ngStyle]="{{answer.Style}}">
      <a>{{Answer}}</a>
 </li>

Answer 2

redd，有很多方法可以实现您想要的。更容易的是，您显示的QuizAnswers是一个对象数组。假设您有一个类似

的数组

displayedQuizAnswers=[
   {question:'....',index:0,ok:false}
   {question:'....',index:1,ok:true}
   {question:'....',index:2,ok:false}
   {question:'....',index:3,ok:false}
]

还有一个变量

response:number=-1

例如，您可以写

<ul>
    <li *ngFor="let answer of displayedQuizAnswers;let i=index" 
        [style.background-color]="response==i?answer.ok?'green':'red':'inherit'">
      <a (click)="response==-1 && i=response">{{answer.question}}</a>
    </li>
  </ul>

如何定位由* ngFor生成的特定元素？

2 个答案: