在 Angular 7 中使用 Bootstrap ngb typeahead 时,如果它不起作用,可能是因为没有正确地引入和使用它的组件和指令。下面是一个解决方法的示例:
首先,确保已经安装了 Bootstrap 和 ng-bootstrap:
npm install bootstrap ng-bootstrap
在 angular.json 文件中添加以下样式和脚本引用:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
在你的模块文件(通常是 app.module.ts)中引入需要的模块:
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
在同一个模块文件中,将 NgbTypeaheadModule 添加到 imports 数组中:
imports: [
NgbTypeaheadModule
]
在你的组件模板中,使用 ngbTypeahead 指令并提供必要的参数和方法:
在你的组件中,定义 search 方法:
search = (text$: Observable) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
switchMap(term =>
// 在这里实现搜索逻辑,返回一个 Observable 对象
// 根据输入的 term 进行搜索
)
);
通过按照上述步骤引入和使用 Bootstrap ngb typeahead,你应该能够在 Angular 7 中使其正常工作。