为什么无法使单个单选按钮 select 在从表单组编辑 select 后突出显示

Question

为了从表单组创建一个收音机 select，我使用 ngFor 指令提供了选项列表。一切都很好。因为在某些情况下我实际上不需要这些选项的完整列表，所以我不得不单独将每个选项作为输入。不幸的是，检查一个选项会突出显示其他选项，尽管值确实是我 selected.

我在这里提到了类似问题的许多成功答案，但 none 适用于我的情况。任何人请参考下面的代码和屏幕截图以找出解决方案。任何帮助将不胜感激！

使用 ngFor（工作正常！）

<div class="row ml-5" formGroupName="deliveryForm">
            <div class="col-6 form-group" *ngFor="let method of deliveryTypes">
                <input type="radio"
                    id={{method.id}}
                    (click)="setShippingPrice(method)"
                    value={{method.id}}
                    formControlName="deliveryType"
                    class="custom-control-input">
                <label for="{{method.id}}" class="custom-control-label">
                    <strong>{{method.name}} - {{method.price}}</strong>
                    <br>
                    <span class="label-description">{{method.description}}</span>
                </label>
            </div>   
        </div>

单独输入（尚未添加每个输入的单独条件）

<div *ngIf="deliveryTypes" class="row ml-5" formGroupName="deliveryForm">
            <div class="col-6 form-group">
                <input 
                    type="radio"
                    id="{{deliveryTypes[0].id}}"
                    (click)="setShippingPrice(deliveryTypes[0])"
                    value="{{deliveryTypes[0].id}}"
                    name="deliveryType"
                    class="custom-control-input">
                <label for="{{deliveryTypes[0].id}}" class="custom-control-label">
                    <strong>{{deliveryTypes[0].name}} - {{deliveryTypes[0].price}}</strong><br>
                    <span class="label-description">{{deliveryTypes[0].description}}</span>
                </label>

                <input 
                    type="radio"
                    id="{{deliveryTypes[1].id}}"
                    (click)="setShippingPrice(deliveryTypes[1])"
                    value="{{deliveryTypes[1].id}}"
                    name="deliveryType"
                    class="custom-control-input">
                <label for="{{deliveryTypes[1].id}}" class="custom-control-label">
                    <strong>{{deliveryTypes[1].name}} - {{deliveryTypes[1].price}}</strong><br>
                    <span class="label-description">{{deliveryTypes[1].description}}</span>
                </label>

                <input 
                    type="radio"
                    id="{{deliveryTypes[2].id}}"
                    (click)="setShippingPrice(deliveryTypes[2])"
                    value="{{deliveryTypes[2].id}}"
                    name="deliveryType"
                    class="custom-control-input">
                <label for="{{deliveryTypes[2].id}}" class="custom-control-label">
                    <strong>{{deliveryTypes[2].name}} - {{deliveryTypes[2].price}}</strong><br>
                    <span class="label-description">{{deliveryTypes[2].description}}</span>
                </label>
               </div>
            </div>

Answer 1

简单地将每个输入和标签放在 div 中。问题解决了。

为什么无法使单个单选按钮 select 在从表单组编辑 select 后突出显示

Why unable to make a single radio select highlighted once selected from a form group

html

angular

radio-button

label

form-control