Ошибки синтаксического анализа шаблона: невозможно связать с 'ngbTypeahead', так как это не известное свойство 'input' - PullRequest
Новая
       4

Ошибки синтаксического анализа шаблона: невозможно связать с 'ngbTypeahead', так как это не известное свойство 'input'

1 голос
/ 14 февраля 2020

Я получаю сообщение об ошибке «Ошибки синтаксического анализа шаблона: невозможно связать с« ngbTypeahead », поскольку это не известное свойство« input »», когда я запускаю свой проект angular. Посмотрел везде, но не смог найти решение.

Вот мой 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>

Вот 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() {
  }

}

А вот и код из 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 {
}

Может ли кто-нибудь мне помочь?

1 Ответ

1 голос
/ 14 февраля 2020

Вам также необходимо импортировать модуль 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 {
}

Редактировать: это больше связано с тем, что библиотека требует от вас использовать их библиотеку, а не чистую вещь Angular. Некоторые библиотеки дадут вам все в одном модуле. Компонентные модули пользовательского интерфейса, такие как Material и Ngb Bootstrap, позволяют вам импортировать компоненты по отдельности, поэтому вы можете сохранить размер импортируемого javascript минимальным.

...