Как я могу добавить несколько вариантов выбора на основе некоторых HTML?

Question

В основном я хочу динамически добавлять (несколько) тегов опций к тегу выбора на основе пользовательского html-контента ..

Я знаком со вставкой динамического содержимого с помощью ng-содержимого, проблема в том, что динамический контент необходимо отделить и обернуть в теги mat-option.

Мне нужно иметь возможность принимать полностью пользовательский html каким-либо образом, это может быть div, или список элементов, или что-то еще, но он должен иметь возможность отображать пользовательский html в опциях выбора (а не просто варианты) ..

Ниже приведен очень простой пример, но имейте в виду, что мне нужно иметь возможность принять любой html-код (разбить его / или что-либо еще, а затем отобразить этот html в моем списке выбора)

-

Еще хуже то, что, как я думал, будет работать как запасной вариант, - это использовать один ng-контент, содержащий несколько опций mat ..

<hxgn-common-dropdown [dynamicContent]="true" [(value)]="selected">
  <hxgn-common-dropdown-items>
    <mat-option [value]="1">
      <span class="example">I'm dynamic content = 1</span>
    </mat-option>
    <mat-option [value]="2">
      <span class="example>I'm dynamic content = 2</span>
    </mat-option>
  </hxgn-common-dropdown-items>
</hxgn-common-dropdown>

И я надеялся, что эти две опции появятся в моем выборе циновки:

<mat-select>
    <ng-content select="hxgn-common-dropdown-items"></ng-content>
</mat-select>

К сожалению, это просто делает выбор коврика без опций. Я думаю, что mat-select не работает с ng-контентом? Или я что-то упускаю, может быть?

Есть ли лучший способ сделать это?

В основном я ищу какой-либо способ создания выбора на основе нестандартного HTML. Таким образом, разработчики могут просто предоставить html для моего элемента управления, и он автоматически отобразит выпадающий список.

добавлен блик стека: https://stackblitz.com/edit/angular-mat-select-custom-options?file=src%2Fapp%2Fapp.component.html

Answer 1

Вот как вы можете это сделать: вы можете создать директиву, чтобы вы могли Query директиву. Директива не должна иметь ничего. Как только вы получите List из Directives, вы можете прочитать ElementRef как @ContentChildren(MyDirective, {read: ElementRef})

Затем вы можете визуализировать ElementRef так, как вам нравится внутри вашего пользовательского компонента. Установите образец Stackblitz, и я могу работать с вами над этим ....

Обновление: Вместо чтения ElementRef вы оборачиваете проецируемый элемент содержимого в TemplateRef и запрашиваете common-dropdown-items из common-dropdown. Затем вы просматриваете common-dropdown-items TemplateRef как содержимое mat-option.

см. Этот пример стекаблика https://stackblitz.com/edit/angular-8dibtq

Answer 2

вы пытались использовать JQuery Accordion ?