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}}"。

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

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

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

1 个答案: