primeNG - 私はAngular2 RCとPrimeNGのbeta6を使用していますフィルタのように

Question

ORIGINAL（5月20日）

を優れています。

私はp-dataTableのサンプルを使用して、[filter] = "true"を使用して列フィルタを有効にしましたが、これは通常のテキストフィルタオプションを与えます。

<p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" > 
    <header>List of products</header> 
    <p-column field="productName" header="productName" [sortable]="true"></p-column> 
    <p-column field="productCode" header="productCode" [filter]="true"></p-column> 
    <p-column field="releaseDate" header="releaseDate" [filter]="true"></p-column> 
    <p-column field="description" header="description"></p-column> 
</p-dataTable> 

これにどのようにExcelのようなフィルタを適用しますか？

---

EDIT（7月10日）：

は、私は次のようになります角度2 RC4バージョンで

p型のdataTableフィルタをPrimeNGベータ9に自分のアプリケーションを更新したbelow-

しかし、Excelのフィルタは以下のようになります。

誰もが知っているprimeNGデータテーブルにExcelのようなフィルタを適用するにはどうすればよいですか？

Answer 1

おそらくMultiSelect Filterを使用している可能性があります。

<p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" > 
    <header>List of products</header> 
    <p-column field="productName" header="productName" [sortable]="true"></p-column> 
    <p-column field="productCode" header="productCode" [filter]="true"> 
<ng-template pTemplate="filter"> 
      <p-multiSelect [options]="SelectedItemObject" 
          appendTo="body" 
          defaultLabel="SelectProduct" 
          styleClass="ui-column-filter" 
      ></p-multiSelect> 
     </ng-template> 
</p-column> 
    <p-column field="releaseDate" header="releaseDate" [filter]="true"></p-column> 
    <p-column field="description" header="description"></p-column> 
</p-dataTable> 

多目的情報のprimeNgを参照してください！ https://www.primefaces.org/primeng/#/multiselect