Css 强制angular2多选下拉菜单向下打开

我在Angular8应用程序中使用angular2 multiselect下拉列表。有一种方法可以迫使下拉菜单始终向下打开。我在multiselect中没有看到任何处理它的设置，因此可以使用CSS来完成。

您可以使用“.dropdown”类。它将强制下拉菜单向下打开。

我也遇到了同样的问题。设置

autoPosition:false

为我修复了它

您可以在

DropdownSettings

界面中找到它：

---

使用此关键字禁用选项在mat select标记中输入作为属性。这有助于向下打开“材质”下拉列表或“多选”下拉列表

---

示例：

唯一的解决方案是使用

HTML

---

有位置选项可打开

下拉列表

至

底部

，但您不能强制它始终在底部打开，因为它是下拉列表的默认行为，根据查看端口/DOM位置调整其位置

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
   [settings]="dropdownSettings" (onSelect)="onItemSelect($event)">
</angular2-multiselect>


<button (click)="openDropdown()" >
  Click Here to Open Dropdown
</button>

import { Component,ViewChild, ElementRef, Renderer2 } from "@angular/core";
import { AngularMultiSelect } from 'angular2-multiselect-dropdown';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};

  constructor(private renderer: Renderer2){}

  ngOnInit() {
    this.dropdownList = [
      { id: 1, itemName: "apple" },
      { id: 2, itemName: "banana" },
      { id: 3, itemName: "cherry" },
      { id: 4, itemName: "dates" },
      { id: 5, itemName: "eggfruit" },
      { id: 6, itemName: "Farkleberry" },
      { id: 7, itemName: "Guava" }
    ];
    this.dropdownSettings =
      {
        singleSelection: true,
        text: "fruits",
        enableSearchFilter: true,
        classes: "myclass custom-class",
        autoPosition: false
      };
  }
  onItemSelect(item: any) {
    console.log(item);
    console.log(this.dropdownList);

    this.renderer.removeStyle(this.getElementDropdown(), 'display')
  }

  openDropdown(){
  this.renderer.setStyle(this.getElementDropdown(), 'display', 'block');
  }

  private getElementDropdown(): HTMLElement{
    return document.getElementsByClassName("dropdown-list")[0] as HTMLElement;
  }
}