Ionic框架中如何获取ion-select组件的选中值？

嘿，我来帮你搞定获取这个选择列表选中值的问题！其实操作很简单，只需要给你的ion-select加上双向绑定，再配合一点点TypeScript代码就能实现，具体看下面的修改：

第一步：更新HTML代码 #

你需要给ion-select添加[(ngModel)]来双向绑定选中项，同时给ion-select-option绑定[value]为整个item（因为你用了compareWith来匹配对象，这样能确保选中的是完整的对象而不只是标题）。另外还可以加一个ionChange事件来实时监听选择变化，或者加个按钮测试获取值：

<ion-list>
  <ion-item>
    <ion-label><b>Select</b></ion-label>
    <ion-select [compareWith]="compareWith" [(ngModel)]="selectedItem" (ionChange)="onSelectChanged()">
      <ion-select-option *ngFor="let item of items" [value]="item">{{item.title}}</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

<!-- 可选：添加按钮来手动获取选中值 -->
<ion-button (click)="getSelectedValue()">查看选中项</ion-button>

第二步：更新TypeScript代码 #

在你的组件类里定义一个变量来存储选中的项，然后添加对应的方法来处理选择变化或者获取值：

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  // 保留你原来的组件元数据，比如selector、templateUrl等
  selector: 'app-your-component',
  templateUrl: './your-component.page.html'
})
export class YourComponent {
  items: any;
  selectedItem: any; // 这个变量用来存储选中的项
  compareWithFn = (o1, o2) => {
    return o1 && o2 ? o1.id === o2.id : o1 === o2;
  };
  compareWith = this.compareWithFn;

  constructor(public http: HttpClient) {
    this.loadData();
  }

  loadData() {
    const headers = new HttpHeaders();
    const data: Observable<any> = this.http.get('https://jsonplaceholder.typicode.com/posts');
    data.subscribe(result => {
      this.items = result;
      console.log(result);
    });
  }

  // 当选择变化时触发的方法，实时打印选中值
  onSelectChanged() {
    console.log('当前选中的完整项：', this.selectedItem);
    // 如果你只想拿标题或者ID，直接访问属性就行：
    // console.log('选中标题：', this.selectedItem.title);
    // console.log('选中ID：', this.selectedItem.id);
  }

  // 点击按钮时获取选中值的方法
  getSelectedValue() {
    if (this.selectedItem) {
      alert(`选中的标题是：${this.selectedItem.title}，ID是：${this.selectedItem.id}`);
    } else {
      alert('还没有选择任何项哦');
    }
  }
}

几个关键点要注意： #

• 双向绑定[(ngModel)]：这个是核心，它会自动把用户选中的项同步到selectedItem变量里，你在TS的任何地方都可以直接访问this.selectedItem来获取当前选中值。
• [value]="item"：因为你的选项是对象（每个item有id和title），所以要把整个对象作为选项的值，配合你已经写好的compareWith函数，才能正确匹配选中的对象（默认Angular是引用比较，而你的compareWith是通过id的值比较，这样即使是不同引用但id相同的对象也能被正确识别）。
• ionChange事件：这是可选的，如果你需要在用户选择的瞬间就做一些操作（比如实时更新页面内容），就可以用这个事件触发对应的方法。

这样修改之后，你就能轻松获取到选择列表的选中值啦！

内容的提问来源于stack exchange，提问作者nourhouda