[英]Template parse errors: Can't bind to 'ngbTypeahead' since it isn't a known property of 'input'
I get the error "Template parse errors: Can't bind to 'ngbTypeahead' since it isn't a known property of 'input' " when I run my angular project.当我运行我的 angular 项目时,我收到错误“模板解析错误:无法绑定到 'ngbTypeahead' 因为它不是 'input' 的已知属性”。 Looked everywhere but couldn't find a solution.
到处寻找,但找不到解决方案。
Here is my html.这是我的 html。
<div class="kt-section__content">
<label for="typeahead-basic">Search for a state:</label>
<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />
</div>
Here is the component.ts这是component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
@Component({
selector: 'kt-grn',
templateUrl: './grn.component.html',
styleUrls: ['./grn.component.scss']
})
export class GrnComponent implements OnInit {
public model: any;
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map(term => term.length < 2 ? []
: states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
)
constructor() { }
ngOnInit() {
}
}
And here's the code from app.module.ts这是来自 app.module.ts 的代码
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Could somebody help me?有人可以帮助我吗?
You need to import the NgbTypeaheadModule as well.您还需要导入 NgbTypeaheadModule。
import { NgbModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
NgbTypeaheadModule
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Edit: this is more to do with how the library requires you to use their library rather than a pure Angular thing.编辑:这更多地与库如何要求您使用他们的库而不是纯粹的 Angular 东西有关。 Some libraries will give you everything in one module.
一些库将在一个模块中为您提供所有内容。 UI component modules like Material and NgbBootstrap allow you to import component modules individually, so you can keep the size of the imported javascript down to a minimum.
像 Material 和 NgbBootstrap 这样的 UI 组件模块允许您单独导入组件模块,因此您可以将导入的 javascript 的大小保持在最小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.