如何将ng-content添加到多选组件

Question

型号：

export interface ISelectOption {
  value: string
  viewValue: string
  disabled?: boolean
  icon?: string
  rx?: string[]
}

export interface ISelectOptionGroup {
  disabled?: boolean
  icon?: string
  name: string
  options: ISelectOption[]
}

我正在尝试将图标放置在多选组件中。该图标位于组的右侧

我有以下内容

<form
    [formGroup] = 'form'
    autocomplete = 'off'
    fxLayout = 'col wrap'
    fxLayoutAlign = 'start start'
    fxLayoutGap = '15px'>
  <mat-form-field
      fxFlex = '100%'>

    <mat-select
        #multiSelect
        [formControl] = "multiOptionCtrl"
        [multiple] = "true"
        [placeholder] = 'placeholder'>
      <ngx-mat-select-search
          [formControl] = "multiOptionCtrl"></ngx-mat-select-search>
      <mat-optgroup
          *ngFor = "let group of multiOptionsFilter | async"
          [label] = "group.name">
        <ng-content  select = 'mat-icon'></ng-content>
        <mat-option
            *ngFor = "let option of group.options"
            [value] = "option.value">
          <mat-icon
              [svgIcon] = 'option?.icon'
              class = 'mrg-rt-5px'
              color = 'accent'></mat-icon>
          {{option.viewValue}}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</form>

注意

<ng-content  select = 'mat-icon'></ng-content>

包含。

这是我实例化组件的方式

<nhncd-mat-multi-select-group
    (eventData) = 'getCause($event)'
    [placeholder] = '"Aetiology | Cause"'
    [groups] = '(rs$ | async)["haemoptysis"]'
    fxFlex = '100%'>

    <mat-icon
        [svgIcon] = 'booster1'
        class = 'mrg-rt-5px'
        color = 'accent'>
    </mat-icon>
</nhncd-mat-multi-select-group>

我希望如图所示放置图标

但是，我在任何地方都看不到该图标。 任何帮助表示赞赏。

欢呼