如何在 Ionic 中动态设置离子无线电？答案

【问题标题】：How to dynamically set ion-radio in Ionic?如何在 Ionic 中动态设置离子无线电？
【发布时间】：2018-10-26 09:04:06
【问题描述】：

我有简单的用户列表：

<ion-scroll scrollY="true">
    <ion-item *ngFor="let user of listOfUsers" [(ngModel)]="selectedUser">
        <ion-label>{{ user.title }}</ion-label>
        <ion-radio value="{{ user.value }}" (ionSelect)="OnUserChanged(user)"></ion-radio>
    </ion-item>
</ion-scroll>

我想要做的是以某种方式设置默认情况下会选择特定用户。例如，默认情况下会选择listOfUsers[0]。

我尝试在不同的地方添加 [(ngModel)]="selectedUser" 并附加到它 listOfUsers[0] 但每次都得到不同的错误...

【问题讨论】：

标签： javascript angular ionic-framework ionic3

【解决方案1】：

我认为使用 FormControlName 会更好。

您可以在其中为用户创建一个 FormControlGroup，并为单选按钮创建一个 FormControl。或者，如果用户没有任何其他属性，只有 FormControl。

然后您可以使用 formControl.SetValue() 来设置值。

【讨论】：

【解决方案2】：

您可以设置单选按钮的选中属性：

<ion-scroll scrollY="true">
<ion-item *ngFor="let user of listOfUsers" [(ngModel)]="selectedUser">
    <ion-label>{{ user.title }}</ion-label>
    <ion-radio [checked]="checkDefault(user)" value="{{ user.value }}" (ionSelect)="OnUserChanged(user)"></ion-radio>
</ion-item>

在您的 TS 文件中，您创建 checkDefault() 函数（给它任何您想要的名称）。在这个函数中，可以检查用户是否为默认值，如果是则返回true，否则返回false。

  public checkDefault(user: User): boolean {
if(user.uniqueId === default.uniqueId) {
  return true;
} else return false;

};

如果这不起作用，或者如果这不是您想要的方式，请告诉我。

【讨论】：