6

我正在 Ionic 2 中开发应用程序。我需要以动态方式添加离子选择选项，但我被一些可能非常简单的东西难住了。这是我的代码片段。

<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 "]

我也遇到了异常。

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]

编辑：

并且它没有设置它的值来选择选项。我已经在 Angular 1 中做到了这一点。

<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>

编辑（从评论到答案）

export class JobsearchPage { 
    selectedClassification:string; 
    constructor(http: Http, 
        nav: NavController, 
        messagesService:MessagesService, navParams:NavParams) { 
      this.http = http;
      this.messagesService = messagesService; 
      this.nav = nav; 
      this.classifications = new Array("t9it", 'uitut');
      console.log('STP selected'+selectedClassification); 
  } 
}
4

5 回答 5

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;
}
于 2016-02-28T06:02:45.180 回答
1

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

于 2016-10-18T10:34:04.467 回答
0

类：今天输入.ts

导出类 TodayInputPage {

public _projectName: string;
public projectDetails: any;

}

HTML：今天-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 对象

{日期：“03/04/2017”，持续时间：“07:30”，项目名称：“XYZ”}，...

您班级中的_projectName将保留选定的值。

于 2017-03-04T05:42:46.340 回答
0

就像@Gunter 说我太不熟悉 ionic 但可能是你的问题ngModel总是指向分配给它的单个字段。不是整个对象/数组/任何东西。

据我了解，您希望获得动态创建的选定选项，因此有两种方法可以设置[(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是您选择了哪个选项的键值。

于 2016-02-28T07:02:48.920 回答
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)]

于 2016-05-18T09:17:19.630 回答