Question

我的代码

<li  *ngIf="k.minimum == 1 && k.maximum == 1 ">
    {{k.item_ingredient_group_key}}
    <input id="{{m.details.ingredient_name}}_{{i}}" ngModel name="{{k.item_ingredient_group_key}}"  type="radio" class="hide"  [checked]="m.is_selected" [(ngModel)]="m.is_selected">
    <!-- <input id="{{m.details.ingredient_name}}_{{i}}" ngModel name="{{k.item_ingredient_group_key}}" value="true" type="radio" class="hide" [checked]="m.is_selected" [(ngModel)]="m.is_selected" (ngModelChange)="m.is_selected = !m.is_selected"> -->
    <label for="{{m.details.ingredient_name}}_{{i}}" class="radio">
        <span>{{m.details.ingredient_name}}</span>
        <span class="price">{{m.details.price}}</span>
    </label>
</li>

*

如何通过使用ngFor重复单选按钮，我尝试了上面的代码但如果我选择一个单选按钮意味着所有单选按钮被选中。我对不同的单选按钮组使用相同的名称

Answer 1

你可以使用模板，因为ngFor和ngIf在同一个元素中都不起作用：

<li  *ngIf="k.minimum == 1 && k.maximum == 1 ">
{{k.item_ingredient_group_key}}
 <ng-container *ngFor="let m of k.ingredients">
   <input id="{{m.details.ingredient_name}}_{{i}}" ngModel name="
       {{k.item_ingredient_group_key}}"  type="radio" class="hide"  
       [checked]="m.is_selected" [(ngModel)]="m.is_selected">
   <label for="{{m.details.ingredient_name}}_{{i}}" class="radio">
      <span>{{m.details.ingredient_name}}</span>
      <span class="price">{{m.details.price}}</span>
   </label>

 </ng-container>
</li>

ngFor中的无线电组按钮 - 角度2

1 个答案: