Question

我正在尝试实施this之类的内容。我不想要它的多选部分。只是一个下拉列表，它有一个搜索框，根据我在搜索框中输入的数据，它必须在下拉列表中过滤我的选项。我使用角度1实现了同样的功能，但我真的很困惑使用角度2.

Answer 1

这个主题有很多东西。无论如何，有两种方法可以做到：

1。自定义指令

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.menu-open') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

相应的css类：

.menu-open > .dropdown-menu {
  visibility: visible !important;
  display: block !important;
}

2。 NgxBootstrap

安装ngx-bootstrap和bootstrap

npm install ngx-bootstrap bootstrap --save

打开src/app/app.module.ts并添加

import { BsDropdownModule} from 'ngx-bootstrap';
...
@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ... 
})``

打开.angular-cli.json并在样式数组中插入一个新条目

  ``"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css",
  ],``

您组件中的

``<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>``

来源：https://valor-software.com/ngx-bootstrap/#/dropdowns

具有角度2的动态下拉搜索指令

1 个答案:

1。自定义指令

2。 NgxBootstrap