使单选按钮选择取消可选，而不是基于值进行选择

Question

我正试图根据给定单选按钮的值，从一组单选按钮中默认选择一个按钮，单个单选按钮有值，但没有按值选择。

以下是我的帮助片段：

<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData.type"  
type="radio" name="logistics" checked="checked" id="100" [value]="100" 
[checked]="logisticsData.type == '100'">
<label for="100">Logistic 1</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData.type" 
type="radio" name="logistics" id="101" [value]="101" 
[checked]="logisticsData.type == '101'">
<label for="101">Logistic 2</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData.type"
type="radio" name="logistics" id="102" [value]="102" 
[checked]="logisticsData.type == '102'">
<label for="102">Logistic 3</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData.type" 
type="radio" name="logistics" id="103" [value]="103" 
[checked]="logisticsData.type == '103'">
<label for="103">Logistic 4 </label>
</div>
</div>

目前，logisticsData.type的值为103，但按钮未选择

Answer 1

您的代码应该是这样的

HTML

<div class="field">
<div *ngFor="let list of data; let idx = index" class="ui radio checkbox">
<input type="radio" [(ngModel)]="logisticsData" name="radiogroup" [checked]="list.id === 102" [value]="list.id" />{{ list .description }}
<label for="102">{{list.label}}</label>
</div>
</div>

TS代码

logisticsData = 102;
data = [ {id: 101, description: '101', label: 'Logistic 1' }, {id: 102,description: '102', label: 'Logistic 2'}, {id: 103,description: '103', label: 'Logistic 3'} ];

注意：-您可以设置角度[checked]="list.id === 102"&amp；您可以使用类似于logisticsData = 102;的ts代码进行默认分配

硬编码HTML的第二个示例

<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData" type="radio" name="logistics" checked="checked" id="101" value="101" />
<label for="101">Logistic 1</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData" type="radio" name="logistics" id="102" value="102" />
<label for="101">Logistic 2</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData" type="radio" name="logistics" id="103" value="103" />
<label for="102">Logistic 3</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input [(ngModel)]="logisticsData.type" type="radio" name="logistics" id="104" value="104" />
<label for="104">Logistic 4 </label>
</div>
</div>

ts代码

logisticsData = '102';