Angular 2 - ngFor-Iteration -> click-event 不适用于 ngFor 的单个 Array-Entry答案

【问题标题】：Angular 2 - ngFor-Iteration --> click-event doesn´t works on single Array-Entry of ngForAngular 2 - ngFor-Iteration -> click-event 不适用于 ngFor 的单个 Array-Entry
【发布时间】：2017-03-14 14:22:24
【问题描述】：

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

现在我想实现一个点击事件来切换这个<li>-tags（多选答案）的每个的活动状态。

以下标记使数组中的所有项目（所有答案）都处于活动状态，不是只有我单击的单个 li-tag。这是我的问题，我期待在社区的支持下解决它。

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 中实现点击事件的索引，但它也不起作用。提前致谢

【问题讨论】：

标签： angular ngfor

【解决方案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>

【讨论】：

非常感谢您的回答。在我的数据对象中进行这种更改非常有用！

【解决方案2】：

Martin 的回答几乎没问题，但我会稍微改进一下。我想只有一个正确答案，所以最好只将点击的那个设置为active，其余的则保留inactive。

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

Working plunker

【讨论】：

非常感谢您的回答。实际的挑战是多项选择答案，因此 Martin 的代码与之匹配。