Group wise dynamic Radio button get select Angular 4

Question

我有一个 json 数组。通过迭代这个数组，我生成了复选框和无线电输入的组合。但问题是在我移动到下一组时选择一组单选按钮后，上一组单选按钮被取消选择。

我提供代码片段：-

private modalArray = [
    { 
      id:1,
      name:'Bread Type',
      choicetype:"single",
      child:[
          {
            id:11,
            name:"Roasted Bread",
            value:"roasted",
            default:"roasted"
          },
          {
            id:12,
            name:"Multi grain Bread",
            value:"multigrain",
            default:""
          },
          {
            id:13,
            name:"Bishakto Bread",
            value:"bishakto",
            default:""
          }
      ]
    }, 

    { 
      id:3,
      name:'Topins Type',
      choicetype:"single",
      child:[
          {
            id:31,
            name:"Green Capcicum",
            value:"green",
            default:""
          },
          {
            id:32,
            name:"Yellow Capcicum",
            value:"yellow",
            default:""
          }
      ]
    }
  ];

在我看来组件：-

<div class="pop-mid">
                <div class="pop-tab-block">

                    <div *ngFor="let modal of modalArray" class="pop-tab-item">
                        <h2 class="main-subheading-type2">{{ modal.name }}</h2>

                        <ul>
                            <li *ngFor="let choice of modal.child">
                                <span class="food-type ft-veg"></span>
                                <div *ngIf="modal.choicetype=='single'" class="rsnt-opt-chk">


                                    <input 
                                        type="radio" 
                                        (change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype)"
                                        name="choices"
                                    />
                                    <label>{{ choice.name }}</label>
                                </div>

                            </li>
                        </ul>

                    </div>
                </div>
            </div>

我该如何解决这个问题？提前致谢

Answer 1

你能试试这个吗： <input type="radio" (change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype )" name="{{'choices'+modal.id}}" /> 在 <li> 标签中

Group wise dynamic Radio button get select Angular 4

Group wise dynamic Radio button get select Angular 4

angular

angular4-forms