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

Posted 2023-03-05

【中文标题】如何设置图标而不是占位符角度2

【英文标题】：how to set icon instead of placeholder angular 2

【发布时间】：2018-06-18 01:39:52

【问题描述】：

我已经实现了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>

输出是这样的：

但我想要搜索图标而不是下拉字段。任何人都可以提出任何解决方案吗？

【问题讨论】：

But I want search icon instead of dropdown field ? 意味着您需要文本搜索过滤器来代替下拉菜单？你能解释一下吗？

下拉列表仅用于搜索。我只需要搜索 icon，它会在点击时显示下拉列表。

【参考方案1】：

您可以通过简单地使用[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>

【讨论】：

@SargamSanghani，很高兴知道，快乐编码:)

【参考方案2】：

您可以尝试实现模板。

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

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

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