切换开关不工作在角反应形式内

Question

在我的角6应用程序中，我使用的是角反应形式，它有一个三状态切换开关在模板阵列内。

具有三种状态切换的Html：

      <div class="switch-toggle switch-3 switch-candy">
        <ng-container #buttonIcon *ngFor="let option of options" >
          <input 
            type="radio" 
            formControlName="state"
            [id]="option"
            [value]="option" />
          <label 
            [attr.for]="option">
            {{option}}
          </label>
        </ng-container><a></a>
      </div> 

工作堆栈闪电战：

https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-kqhsvy

请单击上述链接中的add按钮以查看输入。

对于.，单击“添加”按钮三次，然后添加三行，这里的第一行切换开关单独工作，其余行的切换不工作。即使在第二行或第三行进行切换，也只更改第一行。

请帮助我使切换开关对每一行都是唯一的，并分别检索每一行中的切换值。

Answer 1

这是因为所有标签和输入的id是相同的。将html更改为

<div class="switch-toggle switch-3 switch-candy">
  <ng-container #buttonIcon *ngFor="let option of options" >
    <input 
      type="radio" 
      formControlName="state"
      [id]="option+i"
      [value]="option" />
    <label 
      [attr.for]="option+i">
      {{option}}
    </label>
  </ng-container><a></a>
</div>