Angular Bootstrap Typeahead 服务问题

Question

您好，我正在尝试在 angular 中构建一个 Bootstrap Typeahead，我在其中集成了一项针对 JSON 数据的自动完成服务。

这是我组件中的预输入代码 -

export class NgbdTypeaheadBasic {
public model: any;
searchList: Search[];
constructor(private searchservice: SearchService) { }

ngOnInit() {
  this.searchList = this.searchservice.getSearch();
}

search = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(200),
    distinctUntilChanged(),
    map(term => term.length < 2 ? []
      : searchList.filter(v => v.searchitem.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
  );

 }

这是我的输入框-

<input type="search" [(ngModel)]="model" [ngbTypeahead]="search">

这是我的服务代码 -

import { Injectable } from '@angular/core';
import { Search } from '../data/search';
import { SEARCH } from '../data/searchdata';

@Injectable()
export class SearchService {

  constructor() { }

  getSearch(): Search[]{
    return SEARCH;
  }
}

这是我的示例数据 -

search.ts

export class Search{
 id: number;
 searchitem: string;
 url: string;
}

searchdata.ts -

    import { Search } from './search';

export const SEARCH: Search[] = [
    {
        id:1,
        searchitem: 'jeans',
        url: 'https://www.google.co.in',
    },
    {
        id:2,
        searchitem: 'Shirts',
        url: 'https://www.facebook.com',
    }
];

我收到错误消息 -

error TS2304: Cannot find name 'searchList'.

请帮忙。

Answer 1

我认为你应该使用 this.searchList

this.searchList.filter(v => v.searchitem.toLowerCase()

Angular Bootstrap Typeahead 服务问题

Angular Bootstrap Typeahead Service issue

twitter-bootstrap

ng-bootstrap

angular