当一个选项被 selected 时，ionic 更改文本显示在 ion-select 上

Question

不知道你明白没有。我想要做的是有一个带选项的 ion-select，当用户 selects，例如，"Albania (+355)" 并按下 OK 按钮时，在 select 中只会显示为“+355”而不是 "Albania (+355)"

添加-contact.html

      <ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" placeholder="País">
        <ion-option [value]="countries" *ngFor="let countries of country">
          {{countries.country_name}} ({{countries.dialling_code}})
        </ion-option>
      </ion-select>

添加-contact.ts

country = [{ "country_code": "AL", "country_name": "Albania","dialling_code": "+355" },
           { "country_code": "DZ", "country_name": "Algeria", "dialling_code":"+213" }];

这是我拥有的： name-code-displayed

这是我尝试显示的内容：only-code-displayed

Answer 1

根据Documentation,

ion-select 有一个输入属性 selectedText 其中：

The text to display instead of the selected option's value.

您可以尝试使用 [selectedText]="selected_value.dialing_code"。

 <ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" [selectedText]="selected_value.dialing_code">

        <ion-option [value]="countries" *ngFor="let countries of country">
          {{countries.country_name}} ({{countries.dialing_code}})

        </ion-option>
      </ion-select>

Answer 2

我也可以使用 ionChange 事件的语句如下：

(ionChange)="getCountry($event)"

这样，组件会捕获select在select中编辑的值，然后处理您要显示的信息。

当一个选项被 selected 时，ionic 更改文本显示在 ion-select 上

Ionic change text displayed on ion-select when an option is selected

ionic-framework

ionic2

ion-select