arrays - 使用外部 JSON 文件而不是 .TS 文件进行预输入

Question

我让 Typeahead 使用 Angular 8 和 ng-bootstrap 工作。但是，我希望 empId 来自 JSON 文件，因为有超过 10,000 个条目。目前，我有这个：

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

.TS 文件：

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';

const empId = ['643200','987900','043100','049400','189700','240800','617600','228700','188600','631200','695000','029500','626500','199700','619300','995300','123700','619400','230200','017300','237800'];

@Component({
  selector: 'ngbd-typeahead-basic',
  templateUrl: './typeahead-basic.html',
  styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadBasic {
  public model: any;

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

}

仅供参考，JSON 文件位于../path/file.json结构中某个位置的同一服务器中：

[
  {
    "empId": "643200"
  },
  {
    "empId": "987900"
  },
  {
    "empId": "043100"
  },
  {
    "empId": "049400"
  },
  {
    "empId": "189700"
  }
]

同样，PS：JSON 文件中的 empId 有超过 10,000 多个条目。这只是一个例子。

标签： arraysjsonangular