Question

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

Answer 1

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

将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'}], };

Answer 2

<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”是初始选择的值，在这种情况下，数组国家/地区的索引为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);
}

如何在Appery离子应用程序中添加值以选择组件并获取选择的选项

2 个答案: