Html 引导下拉高度不随数据更改而更新-角度

很抱歉，我重新发布了这个问题，但由于缺少最小的可复制代码，我之前的问题被标记为关闭。我附加了一个stackblitz链接

原问题-

请不要把这个也关上。这对我的项目非常重要，我已经在这个项目上坚持了16个小时

我在Angular 8项目中使用引导下拉菜单创建了一个自定义搜索选择下拉菜单。该功能工作得很好，但问题在于当下拉菜单在元素顶部打开时。现在，当我使用搜索框搜索时，列表会相应地更新并缩短，但它会一直漂浮在空中。你可以在下面的GIF中看到这个问题

发行GIF-

正如您在第一个案例中看到的，当我搜索时，列表会缩短，并漂浮在空中。我想要的是，当列表被缩短时，它仍然直接出现在专家下拉按钮的上方，中间没有任何空格

下面是我的HTML代码：

<div class="dropdown h-100" [ngClass]="{'statusDropdownContainer': config.src != 'unavailability'}">
    <a class="btn btn-white dropdown-toggle mb-2 statusFilterDropdown h-100 w-100 flex-middle" [ngClass]="{'btnDisable': disable, 'srcUnavailability': config.src == 'unavailability' }" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="text-truncate">{{config.src != 'unavailability' ? config.dropdownTitle + ':' : ''}} {{selectedValue ? selectedValue : 'All'}}</span>
    </a>
    <div class="dropdown-menu w-100 pt-0" aria-labelledby="dropdownMenuButton">
        <input type="text" class="w-100 p-2 searchInput" [ngModel]="searchValue" (ngModelChange)="filterDropdown($event)" placeholder="{{config.placeholder}}">
        <a *ngFor="let option of filteredList; let i=index" class="dropdown-item pointer text-contain" [ngClass]="{'alternateBackground': i%2 == 0 }" (click)="selectValue(option.name, option.unique_code)">
            {{option.name}} 
        </a>
        <div *ngIf="filteredList.length <=0" class="text-center text-muted mt-1">No {{config.user}} found</div>
    </div>
</div>

编辑：我找到了导致问题的确切原因。Bootstrap的下拉列表使用PopperJ来定位下拉列表。PopperJS计算下拉列表在滚动事件上的位置，因此每当窗口滚动时，下拉列表的尺寸都会重新计算（使用transform CSS）。但在我的例子中，由于没有滚动，因此不会计算尺寸，并且下拉列表的高度与用户在搜索框中搜索之前的高度相同。但我想要的是每次列表数据发生变化时都重新计算维度。任何建议都会有帮助。谢谢

Bootstrap的下拉列表使用PopperJ来定位下拉列表。PopperJS计算下拉列表在滚动事件上的位置，因此每当窗口滚动时，下拉列表的尺寸都会重新计算（使用transform CSS）

一种方法是将主体的高度设置为略大于视口高度，然后通过编程触发ngModelChange上的滚动


您可以添加到CSS中（如果不需要，您还可以使用
overflow-y:hidden；
）隐藏垂直滚动条）

您可以在
ngModelChange
上的
filterDropdown（e）
方法中添加向下滚动1px和向上滚动1px，如下所示，以达到所需效果

  filterDropdown(e) {
    console.log("e in filterDropdown -------> ", e);
    window.scrollTo(window.scrollX, window.scrollY + 1);
    let searchString = e.toLowerCase();
    if (!searchString) {
      this.filteredList = this.data.slice();
      return;
    } else {
      this.filteredList = this.data.filter(
        user => user.name.toLowerCase().indexOf(searchString) > -1
      );
    }
    window.scrollTo(window.scrollX, window.scrollY - 1);
    console.log("this.filteredList indropdown -------> ", this.filteredList);
  }

  filterDropdown(e) {
    console.log("e in filterDropdown -------> ", e);
    window.scrollTo(window.scrollX, window.scrollY + 1);
    let searchString = e.toLowerCase();
    if (!searchString) {
      this.filteredList = this.data.slice();
      return;
    } else {
      this.filteredList = this.data.filter(
        user => user.name.toLowerCase().indexOf(searchString) > -1
      );
    }
    window.scrollTo(window.scrollX, window.scrollY - 1);
    console.log("this.filteredList indropdown -------> ", this.filteredList);
  }