Primeng UI框架ionic3 中下拉選擇插件p-dropdown 插件的使用方法

1、html引入：

<p-dropdown float-right [options]="sortOption"  [(ngModel)]="sortNow" optionLabel="name" (onChange)="changeType()"></p-dropdown>

2、在當前總模塊或頁面模塊里引入模塊：

import {DropdownModule} from 'primeng/dropdown';

3、在ts頁面中初始化組件的值，並獲取選中的值，並提交個后台：

export class DerailParticulars {
    // 初始化下拉選項的值
    sortOption:Array<object> = [];
    // 初始化默認選中的下拉框的值(必須和this.sortOption內元素的數據類型一致）
    sortNow:any = {name:'最新作品',type:'newest'};
    ionViewDidLoad() {
        this.sortOption = [
            {name: '最新作品', type: 'newest'},
            {name: '熱門作品', type: 'hot'}
        ];
    }
    changeType(){
        let type = this.sortNow.type;
        // 獲取當前選中的下拉框的值對應的產品列表
        this.getProductList(type)
    }
    getProduceList(){
         // 獲取產品列表請求
    }
}        

解釋：1、this.sortNow 為當前選中的下拉框的值對應的this.sortOption中的某個對象，this.sortNow.type即為提交給后台的類型值。

　　   2、html里的optionLabel屬性值應和初始化下拉框值列表的要顯示的類型的屬性名對應。如示例中的name屬性。

4、完結。