问题描述
我在当前项目中使用的是Angle 5和Primeng版本6。我正在尝试实现一个下拉组件。但是我需要在其上实现带有表单的动态选项，就像所提供的图像一样。该form（下拉选项）具有一些功能。
我已经尝试过了，但是没有运气。
<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>
这可能吗？有更好的解决方案吗？
下拉菜单
解决方法
使用@ 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>
