angular - 默认选择值 ion ion-radio 具有使用 react 形式的动态值

Question

我正在使用具有动态值的 ion-radio ，并且需要将第一个值设置为使用 react 形式选择的值。

 <ion-list radio-group formControlName="typeName">
                <ion-label class="label-radio">
                  Type
                </ion-label>
                <ion-item *ngFor="let option of options">
                  <ion-label>{{option.name}}</ion-label>
                  <ion-radio [value]="option.id"></ion-radio>
                </ion-item>
  </ion-list>

typescript :

constructor(...){
 this.excavationInformationForm = formBuilder.group({
     ...
     **IntersectionType: '',**
     ...

    });
}

Answer 1

您只需要在创建控件时设置该控件的值，使其成为默认选中的第一个选项的 id:

this.excavationInformationForm = formBuilder.group({
  // ...
  typeName: [options[0].id],
  // ...
});

编辑:

如果届时数据不可用，可以将其初始化为空

this.excavationInformationForm = formBuilder.group({
  // ...
  typeName: [''],
  // ...
});

，然后在准备好选项列表时，更新控件的值:

this.excavationInformationForm.get('typeName').setValue(options[0].id);