ionic2 + Angular2选择列表

时间:2016-02-21 06:58:18

标签: angular ionic2 ionic2-select

http://ionicframework.com/docs/v2/components/#select

我正在尝试显示选择选项并捕获选择。我已经尝试过方法,onChanges甚至在内联点击,但没有任何作用。

<ion-list>
    <ion-item>
        <ion-label>List </ion-label>
        <ion-select [(ngModel)]="selected" multiple="true" cancelText="Cancel" okText="Okay!">
            <ion-option *ngFor="#row of list;" value="{{row.id}}" (click)="checkSelected(row.id)" checked="{{ gq.isSelected(row.id) }}">{{ row.english_name }}</ion-option>
        </ion-select>
    </ion-item>
</ion-list>

设置页面类

export class SettingPage implements OnChanges{

    selected;
    list = [];

    constructor(private nav:NavController, public gq: gq)
    {
        this.gq
            .list()
            .subscribe(data => this.list.push(data));
    }
    stpSelect() {
        console.log('STP selected');
        console.log(this.selected);

    }
    ngOnChanges(changes) {
        console.log(changes);
    }

    checkSelected (data)
    {
        console.log('test');
        console.log(data);
    }
}

我只是希望从函数中捕获选定的模型值,当事情发生变化时。

1 个答案:

答案 0 :(得分:2)

由于离子选择组件利用 ngModel ,您可以尝试收听 ngModelChange 事件:

<ion-select [(ngModel)]="selected" multiple="true" cancelText="Cancel" okText="Okay!" (ngModelChange)="doSomething()">
  (...)
</ion-select>