Question

基本上，我希望基于自定义html内容向选择标签动态添加（多个）选项标签。

我熟悉用ng-content插入动态内容，这里的难题是动态内容需要分离出来并包装在mat-option标签中。

我需要能够以某种方式接受完全自定义的html，它可以是div或元素列表等，但它必须能够在select选项中显示自定义html（不仅仅是简单的字符串选项）。

下面是一个非常简单的示例，但是请记住，我需要能够接受任何html ..（将其分解为/或其他内容，然后在我的选择中显示该html）

-

更糟糕的是，我认为要回退的方法是使用包含多个mat-options的单个ng内容。

<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>

不幸的是，这只是渲染了一个带有NO选项的选择垫。我猜mat-select不适用于ng-content吗？还是我可能想念什么？

有更好的方法吗？

我基本上正在寻找任何方法来创建基于自定义html的选择。这样开发人员便可以向我的控件提供一些html，它将自动呈现下拉列表。

增加了堆叠闪电战：https://stackblitz.com/edit/angular-mat-select-custom-options?file=src%2Fapp%2Fapp.component.html

Answer 1

您可以按照以下方式进行操作：您可以创建一个指令，以便可以10-10 02-01 08-30使用该指令。该指令不需要任何内容。一旦获得Query的{{1}}，就可以像List一样阅读 Directives

然后，您可以根据需要在自己的自定义组件中渲染ElementRef。设置一个样本Stackblitz，我可以与您合作。...

更新：您无需阅读ElementRef，而是将内容投影元素包装在@ContentChildren(MyDirective, {read: ElementRef})中，然后从ElementRef查询TemplateRef。然后，您将common-dropdown-items的内容作为common-dropdown的内容进行循环浏览。

请参阅此堆叠闪电战示例https://stackblitz.com/edit/angular-8dibtq

Answer 2

您是否尝试过使用JQuery Accordion？

如何基于某个HTML添加多个选择选项？

2 个答案: