Question

我有一个单选按钮

<div class="radio" *ngFor="let item of shipping?.availableOptions">
     <input type="radio" name="shipping"  value="{{item.id}}" [checked]="orderCheckoutRequest?.order?.shippingOptionId===item.id" formControlName="shipping">
                                            {{item.name}} <strong>( {{item.shippingCost.amount}} {{item.shippingCost.currency | lowercase}} )</strong>

</div>

如果我使用[checked] =＆＃34; orderCheckoutRequest？。order？.shippingOptionId === item.id＆＃34;预选这个收音机。确实预先选择了单选按钮，但是角形不能识别它并且表单无效（因为需要运送选项）

如果我走另一条路线并在我的组件中做这样的事情：

const shippingControl = this.checkoutForm.get("shipping");
const selectedShippingOptionId = option['shippingOptionId'];
shippingControl.patchValue(selectedShippingOptionId);

然后对于角形式这是有效的，因为控件有一个值，但我有两个问题：

当我在浏览器中渲染视图按钮时，未选中
我触发另一个http请求，因为在ngOnInit（）中我订阅了shippingControl，如下所示：

shippingControl.valueChanges.skip(1).subscribe(data => { this.cartService.updateShippingForOrder(); })

我试过用skip（1）解决这个问题，但由于某种原因，这根本不值得尊敬。感谢

Answer 1

按一个标记，说＆＃34; radioSelected＆＃34;到shipping?.availableOptions数组。默认情况下，将其值设置为false。一旦orderCheckoutRequest?.order?.shippingOptionId===item.id 满足，然后更新相应的＆＃34; radioSelected＆＃34;价值为真。

使用

更改html模板[checked]

<input type="radio" name="shipping"  value="{{item.id}}" [checked]="item.radioSelected" formControlName="shipping">

Angular 4 Radio控件无法正常工作

1 个答案: