如何在 ngx-mat-select-search 上设置自定义 mat-select 标头？

Question

目前我的自定义 ngx-mat-select-search 看起来像这样：

我希望它看起来像这样，标题

Cleint Type, No. of PDOs

位于搜索字段的正上方。如何在 ngx-mat-select-search 中实现这一点？我正在使用 Angular 14

组件.html

<mat-form-field color="accent">
  <mat-select [formControl]="multiCtrl" [placeholder]="placeHolderName" [multiple]="true" #multiSelect>
    <mat-option>
      <ngx-mat-select-search placeholderLabel="Type to search..." noEntriesFoundLabel="'no entries found'"
        [showToggleAllCheckbox]="true" (toggleAll)="toggleSelectAll($event)" [formControl]="multiFilterCtrl"
        [toggleAllCheckboxTooltipMessage]="tooltipMessage"
        [toggleAllCheckboxTooltipPosition]="'above'"></ngx-mat-select-search>
    </mat-option>
    <ng-container *ngIf="isDate">
      <mat-option *ngFor="let option of filteredMulti | async" [value]="option">
        {{ (option.name !== 'null' && option.name !== '0000-00-00 00:00:00') ? (option.name | date: 'mediumDate') : option.name }}
      </mat-option>
    </ng-container>
    <ng-container *ngIf="!isDate">
      <mat-option *ngFor="let option of filteredMulti | async" [value]="option">
        <div class="d-flex justify-content-between">
          <span>{{option.name}}</span>
          <span class="d-none">-</span>
          <span>{{option?.count}}</span>
        </div>
      </mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

组件.css

::ng-deep .ngx-mat-select-search-toggle-all-tooltip {
  font-size: 0.8em;
}

示例演示

Answer 1

我想出了一个快速解决方案，通过在搜索选择面板上方添加禁用的

mat-option

并相应地设置其样式，例如：

在

mat-tooltip-select-all.component.html

：

...
    <mat-option [disabled]="true">
      <div class="header-row">
        <span class="start-text">Cleint Type</span>
        <span class="end-text">No. of PDOs</span>
      </div>
    </mat-option>

    <mat-option>
      <ngx-mat-select-search
        placeholderLabel="Type to search..."
        noEntriesFoundLabel="'no entries found'"
...

在

mat-tooltip-select-all.component.css

：

.header-row {
  display: flex;
  justify-content: space-between;
  margin-right: 24px;
}

.start-text {
  font-size: 0.7em;
}

.end-text {
  font-size: 0.7em;
  text-align: end;
}

/* needed so that the container takes up its full space */
::ng-deep .mdc-list-item__primary-text {
  min-width: calc(100%);
}

这就是我的样子。

希望这对您有帮助，祝您度过美好的一天！