Ionic3 - 如何使用离子选择和离子选项将选定的值传递给事件？答案

【问题标题】：Ionic3 - how to pass selected value to event using ion-select and ion-option?Ionic3 - 如何使用离子选择和离子选项将选定的值传递给事件？
【发布时间】：2018-05-15 05:13:03
【问题描述】：

我想在更改离子选项时传递员工 ID。我试过了，但它不起作用，如果有任何错误，请告诉我这是我的代码：

<ion-label>Employee</ion-label>
<ion-select formControlName="employee">
    <ion-option *ngFor="let employee of employees" (ionChange)="selectEmployee($event, employee)">{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

employee.ts 文件代码：

selectEmployee(event, employee)
{
    alert(employee.EMP_ID);
}

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

与ion-option 一起使用的正确事件是ionSelect。

 <ion-option *ngFor="let employee of employees" (ionSelect)="selectEmployee($event, employee)">{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>

这将在用户选择特定选项时触发。

由于您使用的是响应式表单，因此您可以使用 formGroup 或 formControl 的 valueChanges observable。

 this.yourForm.controls['employee'].valueChanges.subscribe(data=>console.log(data));

这将在用户在选择表单中单击“确定”后被调用。

【讨论】：

【解决方案2】：

您可以使用ngModel 来传递所选选项的值。所选选项的对象下方是通过 ngModel 使用名为 emp 的变量传递的。这个变量应该在你的employee.ts 中全局声明，你可以在整个班级中使用它。

employee.html

<ion-select [(ngModel)]="emp" interface="popover">          
   <ion-option *ngFor="let employee of employees" [value]=employee>{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

如果您需要在选择选项更改时执行任何操作，例如根据所选选项填充新设计内容，或者如果您需要根据所选选项编写任何即时逻辑，那么您可以在 select 中包含 ionChange标记并调用 ts 类上的函数，如下所示。

<ion-select [(ngModel)]="emp" interface="popover" (ionChange)="onEmpSelected()">          
   <ion-option *ngFor="let employee of employees" [value]=employee>{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

如果你做一些不需要全局变量的逻辑，你可以去掉ngModel，只在函数内部做，那么你应该在option标签内使用ionSelect，去掉@ 987654331@ 来自select 标签，如下所示。

<ion-select interface="popover">
   <ion-option *ngFor="let employee of employees" (ionSelect)="onEmpSelected(employee)">{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

employee.ts

全局声明emp，如果使用ngModel，则在必要时使用它。整个员工对象将在您的employee.ts 文件中可用。如果您使用ionChange 调用该函数，请将您的逻辑写入您调用的函数中。

onEmpSelected() {

// write your logic here

}

如果您使用ionSelect 而不使用ngModel，则所选选项数据将在本地可用，以供如下函数访问。

onEmpSelected(employee) {

// write your logic here

}

【讨论】：