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

Question

我在控制多个无线电选择在多个for循环中的行为有困难。

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

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用于第一个无线电区块，radioSelected 1用于第二个块)。

柱塞

Answer 2

工作柱塞

您必须基于name和child index.更改input的parent index

示例：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]以获得这个值。

希望这能帮到你!！