Angular：绑定嵌套对象数组的单选按钮

Question

我有一个嵌套的JSON，其中我试图将单选按钮分别应用于2组，即'recommended_hw'和'role'。 JSON如下。

pubic someVar ={
                  'RecommendedHW': [
                      {
                            'recommended_hw': 'Cat9400',
                            'role': [
                                'Fabric Edge', 'Border', 'Control'
                            ]
                       },
                       {
                            'recommended_hw': 'WS-C4507R+E',
                            'role': [
                                'Role-Edge', 'UCN'
                            ]
                       }
                    ],
                    'SubProduct': 'WS-C4507R',
                    'SubProductType':'Control'
              }

在HTML中我循环使用

    <div *ngFor="let recHw of someVar.RecommendedHW; let recHwEdit=index"">
        <div style="display:inline-block;">
           <input type="radio" [checked]="recHwEdit===0" name="radio1">
           <span class="radio__input"></span>
        </div>
        <div style="display:inline-block;">
            <div *ngFor="let roles of recommendedhw.role; let recRole=index">
                <input type="radio" [checked]="recRole===0" name="radio1">
                <span class="radio__input">{{roles}}</span>
            </div>
        </div>
    </div>

我正在尝试为组中的每个对象设置单选按钮，例如我想将无线电保持为 - 'recommended_hw'：'Cat9400'，'recommended_hw'：'WS-C4507R + E'。在角色的情况下，我想分别为每个角色设置无线电，'角色'：[                                 'Fabric Edge'，'Border'，'Control'                             ]默认情况下，应检查“Fabric Edge”和“角色”：[                                 '角色边缘'，'UCN'                             ]默认情况下，应检查“Role-Edge”。 但是只从“recommended_hw”和“role”中检查了一个JSON键值。我必须在内联中显示2个div，所以我没有单独循环。如何单独设置单选按钮？