将 ionic 4 图标添加到 ng select 下拉菜单

Question

我有一个 ngx select 下拉菜单，希望占位符文本包含来自 ionic 4 框架的放大图标。这可能吗？目前，该图标在同一行但在下拉列表之外。我正在使用 angular 8.

<form [formGroup]="staffForm">
  <div>
    <span>
      <ion-icon name="search"></ion-icon>
      <ngx-select (selectionChanges)="selectionChanged($event)" (select)="goToStaff(selected)" [items]="sortedStaff"
        formControlName="staffId" optionValueField="id" optionTextField="customText"
        placeholder="Search Staff Members Here">
      </ngx-select>
    </span>
  </div>
</form>

Answer 1

我认为这是不可能直接实现的。您可以使用 css 来实现这一点。

尝试以下 css。

:host ::ng-deep .ngx-select__placeholder span::before {
  content: url(https://api.iconify.design/entypo-magnifying-glass.svg?height=15) !important;
  padding: 5px;
}

:host ::ng-deep input.ngx-select__search {
  background-image: url("https://api.iconify.design/entypo-magnifying-glass.svg?height=15");
  background-repeat: no-repeat;
}

:host ::ng-deep input.ngx-select__search:not(:placeholder-shown) {
  background-image: none;
}

HTML

<div>
  <span>
     <ngx-select [items]="['Item 1', 'Item 2']" [(ngModel)]="itemId" placeholder="    Select"></ngx-select>
    </span>
</div>

您可以查看下面的 stackblitz 以了解更多详细信息。

https://stackblitz.com/edit/ionic-6t8xfs

将 ionic 4 图标添加到 ng select 下拉菜单

Add ionic 4 icon to ng select dropdown menu

ionic-framework

angular

ionic4

angular8