Question

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

现在，我想实现一个点击事件，以切换此<li>标记的 EACH 的有效状态（多选答案）。

以下标记会使数组中的所有项目（所有答案）都处于活动状态，不仅显示我单击的单个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

马丁的答案几乎没问题，但我会稍微改进一下。我想会有只有一个正确的答案，所以最好只设置为active所点击的答案，而其余部分将保持为inactive。

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

<强> Working plunker

Angular 2 - ngFor-Iteration - ＆gt; click-event不适用于ng

2 个答案: