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

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;
}