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

我有一个ngx选择下拉列表，并希望占位符文本包括一个放大图标从离子4框架。这可能吗？当前，图标位于同一行，但在下拉列表之外。我用的是角度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>

---

我认为这不可能直接实现。您可以使用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

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

---

您是否尝试过将内置选项作为默认选项放入？尝试创建一个不应作为有效选项选择的，但为默认值的，然后将图标放在其中。您可以创建stackblitz以便我可以帮助您吗？

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