Angular4/HTML - 使用 *ngFor 的多个是或否单选组

Question

我正在使用 *ngfor 来显示一个或多个家庭的值。每个家庭都有一对是或单选按钮组。

因此，例如，如果我显示两个家庭，我最终会得到两对是或否单选按钮组。困境是，通常我们给一个单选按钮组赋予相同的名称，以使是或否选项互斥。

如果我这样做，我无法将第一个家庭的无线电组与第二个家庭的无线电组分开，因为它们的名称都相同，如果我从第一个组中选择“是”，则在第二个组中选择“是”组被选中，反之亦然。

如果我给 yes 收音机和 no 收音机起不同的名字，那么我可以在同一个组中选择 yes 和 no（这不应该发生）。

你觉得我能怎么解决这个问题？

下面附上的片段。

编辑：

我对此有一个后续问题。当他们单击每个家庭的表单组时，我试图显示/隐藏帮助文本。你怎么认为我可以为它写一个 *ngIf，因为我试过了，但它似乎没有用。有什么建议吗？

<div *ngFor="let HH of households; let i = index;" class="col-sm-8 col-xs-12 left_col_padding">
   <div class="script"></div>
    <h5> Please select Yes or No</h5>
    <div class="form-group col-xs-8 padding_none">
        <div class="radio radio-primary radio-inline radio-inline_d" style=" width:auto">
            <input aria-labelledby="Yes"  type="radio" name="selectIncome{{i}}" id="selectIncome{{i}}" required  >
            <label[innerHTML]="Yes"></label>
        </div>
        <div class="radio radio-primary radio-inline radio-inline_d" style=" width:auto">
          <input aria-labelledby="No"  type="radio" name="selectIncome{{i}" id="selectIncome{{i}}" required  >
          <label  [innerHTML]="No"></label>
        </div>
   </div>
</div>

Answer 1

您需要更改名称属性name="{{'selectIncome'+i}}" 而不是name="selectIncome{{i}}" this。

这是一个小的工作示例：multiple group radio button

也许你需要这样的东西：multiple group radio button with value