如何从 Ionic Dynamic Select Options 中获取 ID 值和 NAME 值

Posted 2023-03-13

【中文标题】如何从 Ionic Dynamic Select Options 中获取 ID 值和 NAME 值

【英文标题】：How to get both the ID value and the NAME value from Ionic Dynamic Select Options

【发布时间】：2019-08-16 00:39:32

【问题描述】：

ionic 3，我已经成功实现了动态选择选项，我希望能够将被选择的选项的ID值和Name值发送到服务器

由于我只能获取 ID 或名称，我无法同时获取这两个值，请帮忙，我已经尝试过 JSON.parse，以及选项中的 id.value 和 name.value，但是可悲的是，我只能获得第一个值，而不能同时获得两者

 <ion-list >
    <ion-item class="list-but">
      <ion-label>Tipo de Ambiente</ion-label>
      <ion-select
        [(ngModel)]="idType"
        multiple="false"
        cancelText="Cancelar"
        okText="Ok"
      >
        <ion-option
          *ngFor="let type of type_environment"
          value=" type.name "
          value=" type.id "
          #name
          > type.name </ion-option
        >
      </ion-select>
    </ion-item>
  </ion-list>
  <button ion-button block (click)="insert()">Salvar</button>


``public type_environment = new Array<any>();
  public idType: number = 0;
  public nameType: string = "name";
  private userData: any;`
```

insert() 
    this.userData = this.user.getUserData();

    let body = 
      name: this.nameType,
      id_type: this.idType,
      id_unity: this.navParams.get("id.unidade")
    ;
    console.log("name:", this.idType);

    this.route.postData("/ambiente", body).subscribe(
      data => 
        let response = data as any;

        let ret = JSON.parse(response._body);

        if (ret.insertId) 
          this.navCtrl.popToRoot();
         else 
          console.log(ret);
        
      ,
      error => 
        console.log(error);

【问题讨论】：

如果这是一个多选，你实际上会得到一个数组，但你似乎只想传递 一个 对象？？

是的，我只想传递一个对象，ID 作为值，名称作为第二个值

那你为什么有multiple="true"？

对不起，发帖时忘记更正了

【参考方案1】：

您不需要在选择中有两个value，只需将整个对象绑定到value，即：

<ion-select [(ngModel)]="idType" cancelText="Cancelar" okText="Ok">
  <ion-option *ngFor="let type of type_environment" [value]="type">
     type.name 
  </ion-option>
</ion-select>

在此之后，您的对象值在idType：

insert()  
  // below is your chosen object and its properties
  console.log(this.idType.id, this.idType.name)

DEMO

【讨论】：

这解决了我的问题，非常感谢，你是救生员，再次感谢。

没问题，很高兴听到它有帮助 :) 既然它有帮助，您可以考虑通过单击此答案投票下的灰色勾号来接受答案，这标志着问题已解决。祝您编码愉快！ :)