Angular 2 - ngFor-Iteration --> 点击事件不适用于 ngFor 的单个数组条目

Question

我有一个数组，其中包含相关模板的 component.ts 数据模型中的调查问题的已定义答案。 通过 *ngFor-Directive 迭代此数组，为每个答案（在数组中）渲染

<li>

标签的模板效果非常好。

现在我想实现一个点击事件来切换此 <li> 标签的

EACH

的活动状态（多项选择答案）。

以下标记使数组的所有项目（所有答案）都处于活动状态，NOT只有我单击的单个

li

标签。这是我的问题，我期待在社区的支持下解决它。

HTML 模板

<ul>
  <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="isActive = !isActive" [ngClass]="{'active': isActive}">{{answer}}</li>
</ul> 

相关组件代码

questions = {
 quest_1: {
 quest: 'my question...',
 answers: ['answer A', 'answer B', 'answer C', 'answer D'],
},}

用于切换：

isActive: boolean = false;

我尝试在 HTML 中实现点击事件的索引，但它也不起作用。 预先感谢

Answer 1

如果您想要

Implement a click-event for toggle an active-state for EACH of this <li>-tag

，您需要修改数组，为每个项目设置一个活动属性，例如：

questions = {
 quest_1: {
   quest: 'my question...',
   answers: [
     {text: 'answer A', active: false},
     {text: 'answer B', active: false},
     {text: 'answer C', active: false},
     {text: 'answer D', active: false}
   ],
 }
}

对于 html：

<ul>
  <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="answer.active = !answer.active" [ngClass]="{'active': answer.active}">{{answer.text}}</li>
</ul> 

Answer 2

Martin 的回答几乎没问题，但我会稍微改进一下。我估计会有只有一个正确答案，所以最好设置为

active

只有点击的那个，而其余的则保留

inactive

。

this.questions.quest_1.answers.forEach(v => v.active = false);

工作笨蛋

Answer 3

将选定/单击的 id 作为单独的组件进行跟踪

<ul>
  <li *ngFor="let answer of questions.quest_1.answers, let i=index;" (click)="toggleOptionsMenu(answer.id)" [class.show-more]="answer.id === selectedId">{{answer}}</li>
</ul> 

selectedId = null;
toggleOptionsMenu(id) {
  this.selectedId = id;
}