Question

我希望在更改离子选项时传递员工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);
}

Answer 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));

用户在选择表单中单击“确定”后将调用此方法。

Answer 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>

如果在选择选项更改时需要执行任何操作（例如根据所选选项填充新的设计内容），或者如果您需要根据所选选项编写任何即时逻辑，则可以在{内添加ionChange {1}}标记并在ts类上调用函数，如下所示。

select

如果您不需要全局变量就可以执行某些逻辑，则可以摆脱<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>，而仅在函数内部执行，那么您应该在{{1 }}标签，方法是从ngModel标签中删除ionSelect，如下所示。

option

employee.ts

全局声明ionChange，如果使用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>文件中可用。而且，如果您使用emp调用函数，请在调用的函数中编写逻辑。

ngModel

如果您使用的是employee.ts，而没有ionChange，则所选的选项数据将在本地可用，可由以下功能访问。

onEmpSelected() {

// write your logic here

}

Ionic3 - 如何使用ion-select和ion-option将选定的值传递给事件？

2 个答案: