angular - Ako môžem pridať viacero možností výberu na základe nejakej HTML?

V podstate hľadám spôsob, ako dynamicky pridať (viaceré) značky option do značky select na základe vlastného HTML obsahu..

Som oboznámený s vkladaním dynamického obsahu pomocou ng-content, problém tu je v tom, že dynamický obsah musí byť oddelený a zabalený do značiek mat-option.

Musím byť schopný nejako prijať úplne vlastný HTML obsah, môže to byť div, alebo zoznam prvkov, alebo čokoľvek, ale musí byť schopný zobrazovať vlastný HTML obsah v možnostiach výberu (nie len jednoduché reťazce ako možnosti).

Nižšie je veľmi jednoduchý príklad, ale majte na pamäti, že musím byť schopný prijať akýkoľvek HTML... (rozložiť ho/alebo čokoľvek/a potom zobraziť to HTML vo svojom výbere)

-

Ešte horšie je, že to, čo som si myslel, že bude fungovať ako záloha, by bolo použiť jeden ng-content obsahujúci viacero mat-options..

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

A dúfal som, že sa tie 2 možnosti objavia v mojom mat-select:

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

Bohužiaľ, to len zobrazí mat-select bez akýchkoľvek možností.. Asi mat-select nefunguje s ng-content? Alebo niečo prehliadam?

Je na to lepší spôsob?

V podstate hľadám akýkoľvek spôsob, ako vytvoriť výber založený na vlastnom HTML. Takto vývojári môžu jednoducho poskytnúť nejaké HTML mojej kontrole a ona automaticky vykreslí rozbaľovací zoznam.

pridané stackblitz: https://stackblitz.com/edit/angular-mat-select-custom-options?file=src%2Fapp%2Fapp.component.html

Odpoveď č. 1

Tu je spôsob, ako by ste to mohli urobiť: môžete vytvoriť direktívu, aby ste mohli Query túto direktívu. Direktíva nemusí obsahovať nič. Keď získate List Directives, potom môžete čítať ElementRef ako @ContentChildren(MyDirective, {read: ElementRef})

Potom môžete ElementRef vykresliť akokoľvek chcete vo vašej vlastnej komponente. Nastavte ukážkový Stackblitz a môžem s vami na tom pracovať....

Aktualizácia: Namiesto čítania ElementRef obalíte projektovaný element obsahu do TemplateRef a vyhľadáte common-dropdown-items z common-dropdown. Potom prechádzate cez common-dropdown-items TemplateRef ako obsah mat-option.

odkážte sa na tento príklad na StackBlitz https://stackblitz.com/edit/angular-8dibtq

Odpoveď č. 2

Skúsili ste použiť JQuery Accordion?