每次为每一行获取选择选项的值

时间:2018-02-13 15:51:10

标签: javascript angular ionic-framework ionic2

enter image description here

<ion-row *ngFor="let customer of in_task_only">
  <ion-col col-10>
    <ion-list>
      <ion-item>
        <h1>{{customer.lsl_contact_person}} SC_L: {{customer.lsl_sys_id }} </h1>
        <h2>Contact No : {{customer.lsl_contact_no}} 
      </ion-item>
    </ion-list>
  </ion-col>

  <ion-col col-2>
    <h5> {{customer.lsl_job_status}} </h5>
    Change Status
    <select  (change)="changeStatus(value,{{customer.lsl_sys_id }})" >
      <option value="reschedule"> Re-schedule </option>
      <option value="completed"> Completed </option>
    </select>
  </ion-col>
</ion-row>

我希望获得'changeStatus(value,{{customer.lsl_sys_id }})'中每一行的选择值。选择是基于客户行的动态。

控制器代码`

 in_task_only :any;
      status : any;
      constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.in_task_only=this.navParams.get('in_task_only');
        console.log('measuremet in_task_only',this.in_task_only);
      }

  changeStatus(status,id ){
    console.log(status , id);
  }`

如何获取选择状态??

1 个答案:

答案 0 :(得分:0)

首先,为什么你不使用离子内置的离子选择标签,因为你正在开发一种离子应用程序,如果你使用离子特异性标签会更好,除非你需要开箱即用的东西,离子不会提供。

如果你想从你的ng中传递任何特定的值,那么第二件事就是不需要在函数参数中传递插值,你可以简单地传递没有{{}}的值

在你的html:

中使用ion-select标签试试这个
<ion-select  (ionChange)="changeStatus($event,customer.lsl_sys_id)" >
  <ion-option value="reschedule"> Re-schedule </ion-option>
  <ion-option value="completed"> Completed </ion-option>
</ion-select>

您甚至可以在离子选择上使用ngModel并仅通过传递模型名称来获取所选值:

<ion-select [(ngModel)]="newstate" (ionChange)="changeStatus(newstate,customer.lsl_sys_id)" > // you can even assign a new property on the customer if you want use ngModel name as customer.newProp
  <ion-option value="reschedule"> Re-schedule </ion-option>
  <ion-option value="completed"> Completed </ion-option>
</ion-select>

并在你的ts:

changeStatus(status,id ){
  console.log(status , id); // you will get the value as well as the relative item id here 
}