Angular Bootstrap Typeahead Service问题

时间:2018-05-26 02:51:08

标签: angular twitter-bootstrap ng-bootstrap

您好我尝试在角度中构建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'.

请帮忙。

1 个答案:

答案 0 :(得分:1)

我认为你应该使用 this.searchList

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