如何设置图标而不是占位符 angular 2

Question

我已经实现了 datatable of primeng. 的过滤器我的代码如下：

<p-column field="time" header="Time" [filter]="true" filterPlaceholder="" filterMatchMode="in">
  <ng-template pTemplate="filter" let-col>
    <p-multiSelect [options]="timeOptions" styleClass="ui-column-filter" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-multiSelect>
  </ng-template>
</p-column>

输出是这样的：

但我想要搜索图标而不是下拉字段。谁能提出任何解决方案？

Answer 1

您可以尝试实现模板化。

如果您需要一个简单的解决方案，那么您可以覆盖 css class。

.fa-caret-down:before {
    content: "\f002";
}

在添加之前，通过添加 [styleClass] 属性在 multiselect 组件中添加一个名为 css class 的组件。这样您就可以避免在项目中的其他 font-awesome classes 中受到影响。

Answer 2

您可以通过简单地使用 [hidden] 和一个额外的变量 showFilter 来实现这一点：

<p-column field="time" header="Time" [filter]="true" filterPlaceholder="" filterMatchMode="in">
  <ng-template pTemplate="filter" let-col>
    <i class='fa fa-search' (click)='showFilter = !showFilter'></i>
    <p-multiSelect [hidden]="!showFilter"
                    [options]="timeOptions" 
                    styleClass="ui-column-filter" 
                    (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)">
    </p-multiSelect>
  </ng-template>
</p-column>

如何设置图标而不是占位符 angular 2

how to set icon instead of placeholder angular 2

datatable

placeholder

filter

primeng

angular