Модель:
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>
Мне бы хотелось, чтобы значок располагался так, как показано на рисунке
Однако я нигде не вижу значок.
Любая помощь приветствуется.
Приветствия