从 onchange 中的 p-selectButton 读取值 ~ primeNg,angular 2答案

【问题标题】：Read the value from p-selectButton in onchange ~ primeNg,angular 2从 onchange 中的 p-selectButton 读取值 ~ primeNg,angular 2
【发布时间】：2017-05-16 16:43:42
【问题描述】：

SelectButton 用于使用按钮从列表中选择单个或多个项目。

basedOnModeofTrack(mode){
    // currentTypeMode has value time means it show time dropdown
    console.log(mode);
    this.currentTypeMode = mode;
  }

&lt;p-selectButton name="trackingmode" (onChange)="basedOnModeofTrack()" [options]="trackingmodes" [(ngModel)]="stolenvehicletrack.trackingmode"&gt;&lt;/p-selectButton&gt;

【问题讨论】：

标签： angular primeng

【解决方案1】：

你错过了事件属性

<p-selectButton name="trackingmode" (onChange)="basedOnModeofTrack($event)" [options]="trackingmodes" [(ngModel)]="stolenvehicletrack.trackingmode"></p-selectButton>

在你的 ts 文件中

public basedOnModeofTrack(obj:any){
    console.log(obj.value);
}

【讨论】：

【解决方案2】：

检查导入

import {SelectButtonModule} from 'primeng/primeng';

双向值绑定是使用 ngModel 定义的，而 selectbutton 需要一组选项，其中每个选项都应遵循定义标签值属性的 SelectItem 接口。

查看：

<p-selectButton [options]="cities" [(ngModel)]="selectedCity"></p-selectButton>

JS 代码：

export class SelectButtonDemo {

    types: SelectItem[];

    selectedType: string;

    selectedTypes: string[] = ['Apartment','Studio'];

    constructor() {
        this.types = [];
        this.types.push({label: 'Apartment', value: 'Apartment'});
        this.types.push({label: 'House', value: 'House'});
        this.types.push({label: 'Studio', value: 'Studio'});
    }    
}

this.selectedType 具有选定的数据。你可以使用 this.selectedType 来获取它。

【讨论】：