代码之家  ›  专栏  ›  技术社区  ›  st_clair_clarke

如何向多选组件添加ng内容

  •  0
  • st_clair_clarke  · 技术社区  · 6 年前

    模型:

    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

    感谢您的帮助。

    0 回复  |  直到 5 年前
    推荐文章