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

【问题标题】：how to target a specific element generated by *ngFor?如何定位 *ngFor 生成的特定元素？
【发布时间】：2019-10-15 01:51:56
【问题描述】：

我正在创建一个以 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”时，它会更改所有选项。有什么方法可以从生成的元素中定位特定的元素样式？

【问题讨论】：

这个问题是stackoverflow.com/questions/48277230/…的重复问题

标签： angular typescript

【解决方案1】：

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>

【讨论】：

【解决方案2】：

如果你想让它用于特定元素，你需要将该属性单独添加到对象 Answer 中。

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

【讨论】：