选择选项时，离子选择上显示的离子更改文本

Question

我不知道你是否明白。我想做的是有一个离子选择选项，当用户选择，例如，"阿尔巴尼亚(+355("并按确定按钮时，在选择中只会显示"+355"而不是"阿尔巴尼亚(+355(">

添加联系人.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>

添加联系人.ts

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

这是我所拥有的：显示名称代码

这就是我尝试显示的内容：仅显示代码

Answer 1

根据文档，

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

要显示的文本，而不是所选选项的值。

您可以尝试使用 [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)"

这样，组件将捕获在选择中选择的值，然后处理要显示的信息。