angular - 寻找具有动态表单下拉选项的自定义下拉列表的解决方案

Question

我正在为我当前的项目使用 angular 5 和 primeng 版本 6。我正在尝试实现一个下拉组件。但是我需要实现带有表单的动态选项，就像提供的图像一样。那个表单(下拉选项)有一些功能。
我试过这个，但没有运气。

<select >
  <option value="1">
    <form>
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input>0</input>
       <button>+</button>
       <button>add</button>
    </form>
  </option>
  <option value="2">
    <form>
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input>0</input>
       <button>+</button>
       <button>add</button>
    </form>
  </option>
<option value="3">
    <form>
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input>0</input>
       <button>+</button>
       <button>add</button>
    </form>
  </option>
</select>

这可能吗？。对此有更好的解决方案吗？
下拉菜单的图像

Answer 1

使用@angular/cdk/overlay 来构建这个组件。

<!-- This button triggers the overlay and is it's origin -->
<input (click)="isOpen = !isOpen" type="text"  cdkOverlayOrigin #trigger="cdkOverlayOrigin" >

<!-- This template displays the overlay content and is connected to the button -->
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
  <ul class="example-list">
    <li><form style="display:flex;flex-direction:row;">
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input type="text" >
       <button>+</button>
       <button>add</button>
    </form></li>
    <li><form style="display:flex;flex-direction:row;">
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input  type="text">
       <button>+</button>
       <button>add</button>
    </form></li>
    <li><form style="display:flex;flex-direction:row;">
       <label>AO Drink Bottel</label>
       <label>$2.00</label>
       <button>+</button>
       <input  type="text">
       <button>+</button>
       <button>add</button>
    </form></li>
  </ul>
</ng-template>

例子 :
https://material.angular.io/cdk/overlay/examples
Sample