使用子组件中的下拉列表优化Angular2中的ngFor

Question

我正在尝试在大型ngFor操作期间解决Angular2应用程序中的一些性能问题。它为50个不同的下拉按钮生成大约50个相同的引导下拉菜单，性能是不可接受的。

如果我没有使用Angular2，我可能只需创建一个菜单，然后使用jQuery将其移动到用户点击的位置。但这不是做角色的方法。

<div *ngFor="let configField of selectedMappingConfiguration.ConfigurationFields | visibleFieldsOnly">
    <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      
        </button>
          <!-- This is what I need to optimize  -->
        <div class="dropdown-menu scrollable-menu dropdown-menu-right" *ngIf="mappingDropdownValues">
            <div class="dropdown-item" *ngFor="let val of mappingDropdownValues" (click)="mappingChanged(configField, val)">
                {{val.name}}
            </div>
        </div>
    </div>
</div>

我可以采取哪些不同的方法来处理这个性能问题？如果我想深入了解DOM，我将如何以Angular的方式做到这一点？