angular - 如何在 primng 下拉框 Angular 中添加额外的自定义按钮

Question

我将primeng用于Angular UI组件库，我想知道如何在primng下拉框中（而不是在其对话框中）添加额外的自定义按钮。例如：-在img所示的地方

标签： angularprimengprimeng-dropdowns

Answer 1

就像使用任何其他 HTML 模板一样，您可以添加img并absolute添加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;
  }
}