如何在ngx-mat-select-search中添加自定义表头（Angular 14）

我使用Angular 14自定义了ngx-mat-select-search组件，现在需要在搜索框上方添加表头「Client Type, No. of PDOs」，样式匹配目标图。现有组件代码如下，请问如何实现？

现有组件代码 #

component.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>

component.css #

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

实现方案 #

1. 新增表头结构 #

在搜索框对应的mat-option之后、选项列表之前，添加一个独立的表头容器，确保不被识别为可选项：

修改后的component.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>

    <!-- 新增表头行 -->
    <div class="select-header d-flex justify-content-between">
      <span>Client Type</span>
      <span>No. of PDOs</span>
    </div>

    <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>

2. 添加表头样式 #

在component.css中补充样式，让表头和选项布局对齐，同时通过视觉样式区分：

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

/* 自定义表头样式 */
.select-header {
  font-weight: bold;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 16px;
  margin: 0 -16px;
}

/* 确保选项内容与表头对齐 */
::ng-deep mat-option .d-flex {
  padding: 0 16px;
}

内容的提问来源于stack exchange，提问作者lance2k