离子选择Ionic 2中的动态选项?

时间:2016-02-28 05:55:37

标签: angular ionic2 ionic2-select

我正在开发Ionic 2中的应用程序。我需要以动态的方式添加离子选择选项,但我很难接受可能非常简单的事情。这是我的代码段。

string string1 = "Modbus";
string string2 = "Client";
string string3 = "RTU";
var modbusClientType = Type.GetType(string1+string2);
var modbusRtuType = Type.GetType(string1+ string3);

var modbusRtuInstance = Ativator.CreateInstance(modbusRtuType);
var modbusClientInstance = Activator.CreateInstance(modbusClientType,modbusRtuInstance);

<ion-select [(ngModel)]="classifications" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>

控制台日志的输出:

this.classifications = this.local.get('classifications')._result;
    console.log('classifications: '+ this.local.get('classifications')._result);


updateSelectedValue(event:string):void {
   this.selectedObject = JSON.parse(event);
   console.log('selectedObject: '+this.selectedObject);
}

我也有例外。

classifications: ["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]

修改

并没有将其值设置为选择选项。我在Angular 1中做过这个。

EXCEPTION: Cannot find a differ supporting object '["Any","Agriculture, Forestry, And Fishing","Mining","Construction","Manufacturing","Transportation, Communications, Electric, Gas, And Sanitary Services","Wholesale Trade","Retail Trade","Finance, Insurance, And Real Estate","Services","Public Administration "]' in [classifications in JobsearchPage@30:17]

编辑(从评论到答案)

<select id="classificationId"  data-role="listview" data-inset="true" ng-options="classification as classification for classification in classifications " ng-model="classification" x-ng-change="update(classification)">
<option value=''>Classifications</option></select><select id="classificationId" data-role="listview" data-inset="true" ng-options="classification as classification for classification in classifications " ng-model="classification" x-ng-change="update(classification)"><option value=''>Classifications</option></select>

5 个答案:

答案 0 :(得分:2)

我不使用Ionic但我非常确定ngModel应该指向一个字段,该字段包含(或分配给)所选选项而不是整个可能选项列表

<ion-select [(ngModel)]="selectedClassification" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" value="key" [checked]="true">{{key}}</ion-option>
class MyComponent {
  selectedClassification:string;
}

答案 1 :(得分:1)

你可以尝试(ionChange)='func($ event)'和func(event){console.log(event);}

答案 2 :(得分:0)

与@Gunter相同,我说我也不熟悉离子,但是ngModel可能是你的问题,它始终指向分配给它的单个字段。不是整个Object / Array /等等。

根据我的理解,您希望获得动态创建的选定选项,因此您可以使用两种方法将[(ngModel)]设置为单个字符串。

<ion-select [(ngModel)]="selectedvalue" (ngModelChange)="updateSelectedValue($event)">
 <ion-option *ngFor="#key of classifications" [value]="key" [checked]="true">{{key}}</ion-option>

或第二种方法是将更改事件应用于此选择选项。

<ion-select #newSelect (change)="selectedvalue = newSelect.value">
 <ion-option *ngFor="#key of classifications" [value]="key" [checked]="true">{{key}}</ion-option>

这是我的案例selectedvalue是您选择的选项的键值。

答案 3 :(得分:0)

以下对我有用:

<ion-item>
    <ion-label>Select Name</ion-label>
    <ion-select type="text">
        <ion-option *ngFor="#userInfo of userInfos"  value="{{userInfo.id}}">{{userInfo.name}}</ion-option> 
    </ion-select>
</ion-item>

出于某种原因。不确定为什么,但即使你没有陈述[(ngModel)]

它仍然有效

答案 4 :(得分:0)

类:today-input.ts

导出类TodayInputPage {

public _projectName: string;
public projectDetails: any;

}

HTML:today-input.html

     <ion-item no-lines>
      <ion-label>Project Name</ion-label>
      <ion-select type="text" [(ngModel)]="_projectName">
        <ion-option *ngFor="let p of projectDetails" value="{{p.projectName}}">
          {{p.projectName}}
        </ion-option>
      </ion-select>
    </ion-item>

projectDetails 值来自服务。

projectDetails对象

{date:“03/04/2017”,持续时间:“07:30”,projectName:“XYZ”},...

您班级中的

_projectName 将保留所选值。