如何向 select 组件添加值并在 Appery ionic 应用程序中获取选定的选项

Question

我想以编程方式在类型 select 组件中列出 3 个选项，并在离子应用程序中获取 selected 选项值。

Answer 1

<ion-list>
    <ion-item>
      <ion-label>Countries</ion-label>
      <ion-select [(ngModel)]="selectedCountry" (ngModelChange)="onSelect()">
        <ion-option *ngFor="let item of countries" [value]="item.id">{{ item.value }}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

countries 是你要绑定的列表 ion-select

public countries: Array<{ id: number, value: string }> = [
    { id: 1, value: 'AUS' },
    { id: 2, value: 'IND' },
    { id: 3, value: 'UK' },
  ];

"selectedCountry" 是初始 selected 值，在这种情况下，国家/地区在数组 countries

中的索引为 1

public selectedCountry: any;
this.selectedCountry = this.countries[1].id;

您可以使用 javascript Array.push

为国家/地区动态增加价值

this.countries.push({ id: 4, value: 'USA' });

您可以使用 selectedCountry

中的事件 (ngModelChange)="onSelect()" 更改值

public onSelect(): void {
  console.log(this.selectedCountry);
}

Answer 2

以下是执行此操作的步骤：

将 Select 组件拖放到页面
在属性面板设置中单击已放置组件上的 Option 子组件：
- ng-model 到 viewData.gender 和
- ng-options 到 gender.id as gender.name for gender in viewData.genderOptions
在init函数中为页面集 $scope.viewData = { gender: 0, genderOptions: [ {id:0, name:'Male'}, {id:1, name:'Female'}], };

如何向 select 组件添加值并在 Appery ionic 应用程序中获取选定的选项

How to add values to select component and get seleted option in Appery ionic app

ionic-framework

appery.io