代码之家 › 专栏 › 技术社区 › Flutterian

离子3-离子选择无法看到选择选项的值

ion-select angular6 html-select ionic3 html5

1

Flutterian · 技术社区 · 8 年前

我正在研究选择选项菜单。我无法看到下拉选择的值。我不知道我做错了什么。请在下面的代码中检查一次

<ion-item id="fontBar" *ngIf="isAddTextSelected">
      <ion-label>Gender</ion-label>
      <ion-select [(ngModel)]="gender">
          <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
      </ion-select>
    </ion-item>

2。JS公司

this.employees = ["vishal", "poonam", "Asha", "Usha", "Sachin", "Rahul", "Mama", "Pravin", "Sehwag", "Rajendra", "Swara", "Ranu",
  "vishal", "poonam", "Asha", "Usha", "Sachin", "Rahul", "Mama", "Pravin", "Sehwag", "Rajendra", "Swara", "Ranu"];

我在构造函数中向employees变量添加了值。

注意-:我已经在app.module.ts中导入了下面的内容,甚至添加到了所需的ts文件中。

import { FormsModule } from '@angular/forms';
imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(MyApp, {
      scrollPadding: false,
      [![scrollAssist][1]][1]: true,
      autoFocusAssist: false

}),

三。输出-

2 回复 | 直到 8 年前

1

2

enno.void 8 年前

你必须给期权一个内在价值,如下所示:

<ion-option [value]="group.id">
  {{ group.name }}
</ion-option>

2

1

Shrutika Patil 8 年前

选择组件采用子离子选项组件。如果离子选项没有给定值属性,那么它将使用其文本作为值。

1.使用价值:

<ion-select [(ngModel)]="gender">
 <ion-option *ngFor="let employee of employees" [value]="employee">
    {{employee}}
 </ion-option>
</ion-select>

2.无价值:

<ion-select [(ngModel)]="gender">
 <ion-option *ngFor="let employee of employees">
    {{employee}}
 </ion-option>
</ion-select>

参考: https://ionicframework.com/docs/api/components/select/Select/