代码之家 › 专栏 › 技术社区 › Tonye Boro

提交到数据库时,单选按钮仅选择Ionic中的第一个值

ionic3 ionic-framework html

Tonye Boro · 技术社区 · 7 年前

我有一组单选按钮:

<ion-list radio-group >
<ion-list-header>
Location
</ion-list-header>

<ion-item>
<ion-label>Rural</ion-label>
<ion-radio value="rural" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Urban</ion-label>
<ion-radio value="urban" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Other</ion-label>
<ion-radio value="other" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

</ion-list>

问题是如果我选择其他这是第三个单选按钮, 农村将是第一个提交的。

而且,所有单选按钮都会出现这种情况。只有第一个被提交。

我用过 @ViewChild("schloc")schloc; 保持单选按钮的值。

2 回复 | 直到 7 年前

Preeti Jolapra 7 年前

您可以使用以下代码:


   schloc: any

//定义

  <ion-list radio-group [(ngModel)]="schloc">
    <ion-list-header>
      Location
    </ion-list-header>

    <ion-item>
      <ion-label>Rural</ion-label>
      <ion-radio value="rural"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Urban</ion-label>
      <ion-radio value="urban"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Other</ion-label>
      <ion-radio value="other"></ion-radio>
    </ion-item>
  </ion-list>

提交数据时,请使用 this.schloc

TheLebDev 7 年前

我建议使用 FormControl 所以你的代码看起来像

<ion-list radio-group formControlName="yourFormControl">
<ion-list-header>
Location
</ion-list-header>

<ion-item>
<ion-label>Rural</ion-label>
<ion-radio value="rural" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Urban</ion-label>
<ion-radio value="urban" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Other</ion-label>
<ion-radio value="other" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

</ion-list>

然后在你的 TS 文件: valueToSubmit = yourFormGroup.get('formControlName').value

推荐文章

Victor Ferreira · 我可以在没有MacOS的情况下使用带Ionic 3的TestFlight吗?

7 年前

Uraquitan Matova Ura Kombat · 离子,角度-索引内的全局变量。其他ts页面调用的html

7 年前

Muhammed Raheez PC · 构建应用程序时发生Ionic java构建错误

7 年前

Lee Merlas · 从http GET获得第一个结果后立即显示项目

7 年前

kelvin wong · Ionic 3 angularfire2打印出[对象对象]数据

7 年前

Arun Prasad E S · 角度5,离子3-【ts】类型“void”不可分配给类型“Observable<Post[]>”

7 年前

jamesharvey · 如何使用*ngFor指令从Ionic 3(Cordova、Ionic 3、Angular 5)上的存储器中提取数据

7 年前

user2486706 · 我们可以直接将C++dll集成到ionic框架中吗

7 年前

jamesharvey · 我怎样才能让谷歌地图在一个div内只占据50%的高度?(爱奥尼亚3号,科尔多瓦)

7 年前

Taieb · 按条件显示不同的视图

7 年前