在多个循环中处理单选按钮行为

Question

我无法控制多个 for 循环中多个无线电 select 的行为。

在下面的演示中，当我检查第一个区块的收音机时，它也在第二个区块中 select 使用相同的收音机。请看一看。实际上我需要 select 在不同的块中使用不同的无线电选项。

demo: http://plnkr.co/edit/YpQZyv55tKxTGwDEi5gS?p=preview

Answer 1

模板更改

<div *ngFor="let a of abc; let i = index" >
  <p>{{a}}</p>
  <div *ngFor="let enum of enum_details; let e = index">
    <label for="enum{{i+1}}{{e + 1}}">
      <input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">
      {{enum.name}}
    </label>
  </div>
</div>

和组件变化

radioSelected:string[] = []

现在你在 radioSelected 数组中得到了你的值（第一个无线电块的 radioSelected[0] 和第二个无线电块的 radioSelected[1]）

Plunker

Answer 2

Working Plunker

您必须根据 parent index 和 child index.

更改 input 的 name

示例：name="enums{{i+1}}{{e+1}}"

然后你需要根据parent index

创建一个动态模型

示例：radioSelected[i]

并在您的组件中将 radioSelected:any; 替换为 radioSelected:string[] = [];。

所以在您的模板中使用以下代码，

 <input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">

您将在 radioSelected[index]

中获得您输入的选定值

其中 index 将是 0..n。

示例：如果您选择的 hello 循环的值为 Kumar 那么您将在组件中访问 this.radioSelected[0] 以获取此值。

希望对您有所帮助！！

在多个循环中处理单选按钮行为

handle radio button behavior in multiple loop

for-loop

radio

angular

Working Plunker