Question

我将* ngFor嵌套在一个无序列表中，例如：

<div *ngFor="let q of questions; let i = index;">
<label>{{ q.questionDesc }}</label>
<ul class="list-group">
  <li class="list-group-item list-group-item-action" [class.active]="active === j" (click)="onClick(j)" *ngFor="let c of q.choices; let j = index;">
    {{ c }}
  </li>
</ul>
<hr/>

我的打字稿代码：

active: number;
  onClick(index: number) {
    this.active = index;
  }

当我在内部* ngFor中选择一个“ q.choices”项（c）时，将在所有列表中选择同一项。我只希望选择一个项目。我可能需要为每个选择分配一个唯一的ID，但不确定如何实现。

有什么想法吗？

Answer 1

您可以尝试这种方法，该方法将活动选项存储在const Discord = require('discord.js'); const imageUrl = msg.content.split(' ').slice(1); const embed = new Discord.RichEmbed().setImage(imageUrl) msg.channel.send{ embed }数组的每个question项中：

questions

HTML：

questions = [
   {
      questionDesc: "description here",
       choices: ["choice 1", "choice 2", "...etc"],
       activeChoice: -1
   },
   {
      questionDesc: "description here",
       choices: ["choice 1", "choice 2", "...etc"],
       activeChoice: -1
   },
   // ...etc
]

onClick(questionIndex: number, choiceIndex: number) {
   this.questions[questionIndex].activeChoice = choiceIndex;
}

StackBlitz link

Angular 6 +为无序列表中的嵌套ngFor设置有效

1 个答案: