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

Question

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

现在我想实现一个点击事件，用于切换此 <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 你需要修改你的数组设置属性 active to every item 例如：

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);

Working plunker

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

Angular 2 - ngFor-Iteration --> click-event doesn´t works on single Array-Entry of ngFor

ngfor

angular