刷新页面时未选择单选按钮或未设置默认选择

Question

我正在创建一个表单，其中只有 2 个合作伙伴选择，并且 from2 需要选择一个单选按钮，并在第一次加载时默认选择第一个合作伙伴，但有些它不起作用

请检查以下代码：

<form #personalForm="ngForm" class="editForm" novalidate>
<div class="mainDiv">
<div>Select the type of Partner and click "Next"</div>
<div *ngFor='let partner of partners; let i = index' class="radio">
<label for="partnerSelection">
<input ngModel name="partnerSelection" id='partnerSelection' type="radio" [value]="partner" [checked]="selectedPartnerIndex === i"> {{ partner.partnerType }}
</label>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-success btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="goToNext(personalForm)">
Next
<span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</form>

根据这里的注释是保存和检索所选合作伙伴数据的组件文件代码。

ngOnInit() {
this.selectedPartnerIndex = this.formDataService.getParrtnership();
if(this.selectedPartnerIndex.partnerId == null){
this.selectedPartnerIndex = this.partners[0];
}
console.log('Personal feature loaded!',this.selectedPartnerIndex);
}
save(form: any): boolean {
if (!form.valid) {
return false;
}
this.formDataService.setParrtnership(this.selectedPartnerIndex);
return true;
}
goToNext(form: any) {

if (this.save(form)) {
// Navigate to the work page
this.router.navigate(['/headquarter']);
}
}

它仍然没有选择第一个无线电输入。

Answer 1

你必须使ngModel等于selectedPartnerIndex

.HTML：

<form #personalForm="ngForm" class="editForm" novalidate>
<div class="mainDiv">
<div>Select the type of Partner and click "Next"</div>
<div *ngFor='let partner of partners; let i = index' class="radio">
<label for="partnerSelection">
<input [(ngModel)]="selectedPartnerIndex"  type="radio" [value]="partner"> {{ partner.partnerType }}
</label>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-success btn-outline-rounded btn-info" [disabled]="!personalForm.valid" (click)="goToNext(personalForm)">
Next
<span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</form>

在组件中：

默认情况下：

selectedPartnerIndex = this.partners[0];

Answer 2

我认为这部分代码可以帮助您

<tr *ngFor="let partner of partners; let idx = index">
<label for="partnerSelection">
<input [(ngModel)]="selectedParner" name="partnerSelection" id='partnerSelection' type="radio" [value]="partner['KEY']" [checked]="(selectedPartnerIndex === idx)? true : false"> {{ partner.partnerType }}
</label>
</tr>

和组件

@Component({...})
class App {
selectedPartnerIndex = 0;
}