ionic 2 angular 2 从 ion-select 中获取值以发送 http post

Posted 2023-03-13

【中文标题】ionic 2 angular 2 从 ion-select 中获取值以发送 http post

【英文标题】：ionic 2 angular 2 get values from ion-select in form to send http post

【发布时间】：2018-01-15 10:25:57

【问题描述】：

我已经搜索了很长时间，但找不到任何具体的方法。我能找到的最接近的是：How to get the value from ion-select option

我试图弄清楚如何收集在页面上选择或输入的数据并将其放入一个数组中以供 http 发布？ .. 将不胜感激任何例子或指导我一些好的文档。

离子信息：

科尔多瓦 CLI：7.0.1 离子框架版本：3.5.3 离子 CLI 版本：2.1.12 离子应用程序库版本：2.1.7 离子应用脚本版本：2.0.2 ios部署版本：1.9.1 ios-sim 版本：6.0.0 操作系统：OS X El Capitan 节点版本：v4.3.2 Xcode 版本：Xcode 8.2.1 Build 版本 8C1002

【参考方案1】：

好的，你可以试试这个。

基于链接。你可以试试这段代码

关于 html

<ion-item>
    <ion-label>place</ion-label> 
    <ion-select [(ngModel)]="selected">
     <ion-option value="item" *ngFor="let item of options">
      item.name &nbsp;&nbsp;item.price</ion-option> 
    </ion-select>
</ion-item>

<div padding>
   <button  ion-button (tap)="addOption()" block>Add Option</button>
   <button  ion-button (tap)="PostSelected()" block> Sync </button>
</div>

然后在您的页面组件中。

    import  Http, RequestOptions, Headers  from '@angular/http';
    import 'rxjs/Rx'; 

   //first declare your ngModel variable and you post array variable
    selected:any;
    SelectedArray = []; 

    addOption()
      this.SelectedArray.push(this.selected);
    

    PostSelected()

      let headers = new Headers( 'Content-Type': 'application/x-www-form-urlencoded' );

      let options = new RequestOptions(
      headers: headers,
      method: "POST"
      );

      let bodu = JSON.stringify(this.SelectedArray)

      let result =  this._http.post(link, body, options).timeout(30000);
      result.subscribe(data => 
         console.log('result sucess',data)
      ,error=>
         console.log('result error',data)
      )
     

更新

addOption()
      let validate = this.SelectedArray.filter(res=>
            return res == this.selected;
      );

      // if validate length is 0 the new value of this.selected is currently not found on this.SelectedArray so its ok to be push
      if(validate.length == 0)
        this.SelectedArray.push(his.selected)
      else
        //  else do other thing
       
    

【讨论】：

当我将 ngModel 添加到 ion-select 时，由于某种原因我丢失了数据。

最初，选择框有效，我可以选择一个项目，但它不再显示在页面上。然后我第二次点击选择框没有数据。 : 另外，发现其他人也有同样的问题，但他们的解决方案不起作用。 link

这是我的 html 页面的样子：<ion-item item-multiple-inputs="true"> <ion-label stacked>Environments</ion-label> <ion-select multiple="true" [(ngModel)]="environments"> <<ion-option *ngFor="let environment of environments">environment.name</ion-option> </ion-select> </ion-item>

更新：我在这里找到了离子选择数据问题的解决方案：ionic 2:<ion-select> is not triggering (change) action event

具有更新更改的 HTML：<ion-item > <ion-label stacked>Environments</ion-label> <ion-select multiple="true" [(ngModel)]="environments.name" (ionChange)="onSelectEnvChange($event)"> <<ion-option *ngFor="let environment of environments" [value]="environment.name">environment.name</ion-option> </ion-select> </ion-item>