Question

<li *ngFor="let x of addressdata;let i = index">
  <div class="col-md-2">
    <input type="radio" [value]="x.PreferedAddress" [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered"/>
  </div>
</li>

从db获得3行并正确绑定，对于特定行，只有PreferedAddress = 1剩余值为0。但在列表中默认选中最后一行单选按钮

Answer 1

你使用name属性动态并检查数组变量assign为单选按钮必须在下面有类型Boolean.improve代码..

in html 使用name =＆＃34; radiogroup - {{i}}＆＃34;

Answer 2

您使用原始值（字符串），因此您需要使用自定义trackby函数。

customTB(index, item) {
  return `${index}-${item.PreferedAddress}`;
}

在您的HTML中

<li *ngFor="let x of addressdata;let i = index; trackBy: customTB">
  <div class="col-md-2">
    <input type="radio" [value]="x.PreferedAddress" [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered"/>
  </div>
</li>

Answer 3

使用* ngFor：

绑定单选按钮有多种方法

<li *ngFor="let x of addressdata;let i = index">
   <div class="col-md-2">
        <input type="radio" [checked]="x.PreferedAddress==1" 
           (ngModelChange)="RadioCheck(i)" name="radiogroup" />
   </div>
</li>

这是根据您的要求进行的方式

注意：如果您使用的是[(ngModel)]，那么您不需要id和value属性。

Answer 4

检查是否需要获取字符串，这是我的解决方案：

getChekedState(x: any): string {
    if (x.PreferedAddress==1) {
        return 'checked';
    } else {
        return '';
    }
}

然后在您的HTML中：

[checked]="getChekedState(x);"

Answer 5

问题是您没有设置您的ID和代码值，这是您的改进代码

 <li *ngFor="let x of addressdata;let i = index">
        <div class="col-md-2">
             <input type="radio [value]="x.PreferedAddress [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered-{{i}}"  />
         </div>
    </li>

也许这段代码会帮助你，如果它不起作用，那么就和我分享你的完整代码，以便我可以帮助你

角度4中的单选按钮错误（在ngFor内部）

5 个答案: