Angular 分组动态单选按钮获取选择角度4

Angular 分组动态单选按钮获取选择角度4,angular,angular4-forms,Angular,Angular4 Forms,我有一个json数组。通过迭代这个数组,我生成了checkbox和radio输入的组合。但问题是,当我移动到下一组时,选择了一组单选按钮后,上一组单选按钮被取消选择 我将提供以下代码片段:- private modalArray = [ { id:1, name:'Bread Type', choicetype:"single", child:[ { id:11, nam

我有一个json数组。通过迭代这个数组,我生成了checkbox和radio输入的组合。但问题是,当我移动到下一组时,选择了一组单选按钮后,上一组单选按钮被取消选择

我将提供以下代码片段:-

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>

{{modal.name}
    {{choice.name}
我如何解决这个问题?提前感谢

您能试试这个吗:
中的
  • 标记