Ionic 4：如何从脚本中更新或刷新离子选择？答案

【问题标题】：Ionic 4: How to update or refresh a ion-select from script?Ionic 4：如何从脚本中更新或刷新离子选择？
【发布时间】：2020-06-13 00:18:06
【问题描述】：

我创建了一个带有 ionic 4 和 angular 注册表单的应用程序。我想做以下事情：

我有两个离子选择器，一个用于国家/地区列表，另一个用于电话代码列表。我正在寻找的行为是：当在国家的离子选择中选择一个国家时，必须在电话代码离子选择中自动选择相应的电话代码。

这是我的代码：

国家/地区的离子选择

  <ion-select  id="paisselect" formControlName="pais" (ionChange)="changeselect($event)" interface="popover">

    <ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>

 </ion-select>

电话号码的离子选择

    <ion-select formControlName="phonecode" placeholder="Cod." interface="popover">

    <ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>

</ion-select>

这是我用来更新电话代码 ion-select 的功能

changeselect($event){
    console.log($event.target.value) ;
    let item1 = this.countries.find(i => i.cod === $event.target.value);
    console.log(item1) ;
    this.codigoselected = item1.code;
    console.log(this.codigoselected) ;
}

我正在使用变量“codigoselected”来确定选择了哪个国家。为此，在离子选择选项中，我使用条件来更改选项的选定状态，如下所示：

<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>

目前的行为是这样的：

我选择了一个国家：

但电话代码的离子选择似乎没有更新

但是当我点击字段时，选择了具体的代码

为了刷新字段，我需要在选项下进行 clic：

那么，如何在不点击用户的情况下让界面中的电话代码字段自动更新？

【问题讨论】：

为什么不更新表单控件的值呢？而不是this.codigoselected = item1.code 可能类似于this.yourFormGroup.value.phonecode = item1.code。

标签： ionic-framework ionic4

【解决方案1】：

试试这个，将电话代码选择元素传递给您的changeselect(event, phoneCodeSelect) 函数。

<ion-select  id="paisselect" formControlName="pais" (ionChange)="changeselect($event, phoneCodeSelect)" interface="popover">

    <ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>

 </ion-select>

将#phoneCodeSelect 添加到您的电话代码选择元素。

<ion-select #phoneCodeSelect formControlName="phonecode" placeholder="Cod." interface="popover">

    <ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>

</ion-select>

然后在您的函数中手动更改选择元素的值，同时更新 phoneCode 表单控件值。

changeselect($event, phoneCodeSelect){
    console.log($event.target.value) ;
    let item1 = this.countries.find(i => i.cod === $event.target.value);
    console.log(item1) ;
    this.yourFormGroup.value.phonecode = item1.code; // change yourFormGroup to what your variable's name is 
    phoneCodeSelect.value = item1.code;
}

【讨论】：