如何在primeng下拉框Angular中添加额外的自定义按钮答案

【问题标题】：How to add extra custom button in primng dropdown box Angular如何在primeng下拉框Angular中添加额外的自定义按钮
【发布时间】：2021-11-11 07:56:17
【问题描述】：

我正在为 Angular UI 组件库使用primeng，我想知道如何在 primng 下拉框中（而不是在其对话框中）添加额外的自定义按钮。例如：- In the spot as shown in img

【问题讨论】：

标签： angular primeng primeng-dropdowns

【解决方案1】：

就像使用任何其他 HTML 模板一样，您可以添加 img 和 absolutely position 它。

模板：

<div class="dropdown-wrapper">
  <label class="control-label"
         for="data-to-choose-dropdown-id">
      Data To Choose
  </label>
  <p-dropdown [options]="_options"
              [attr.id]="'data-to-choose-dropdown-id'"
              [filter]="true"
              appendTo="body"
              [showClear]="true"
              placeholder="Choose"
              [style]="{'width':'100%'}"
              optionValue="id"
              optionLabel="name">
  </p-dropdown>
  <img class="extra-button" [src]="'assets/images/icons/magnifying-glass-brand.svg'" (click)="onExtraButtonClick()">
</div>

SCSS：

label {
  color: #6f8599;
}

.dropdown-wrapper {
  position: relative;

  ::ng-deep p-dropdown{
      .p-placeholder {
        opacity: 0.7;
      }
  }

  .extra-button {
    position: absolute;
  }
}

【讨论】：