Как добавить нг-контент в мульти-компонент - PullRequest
0 голосов
/ 30 октября 2018

Модель:

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>

Мне бы хотелось, чтобы значок располагался так, как показано на рисунке

enter image description here

Однако я нигде не вижу значок. Любая помощь приветствуется.

Приветствия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...