Angular 如何使用API获得提前输入建议

尝试以

ng typeahead

建议的形式获取名称，并在代码下方尝试，但无法获取自动建议。这是我的密码

fnPopulateEntity1Lovs() {
  this.http
    .get("https://reqres.in/api/products/", {})
    .subscribe((res) => {
      this.testData = res;
    });
}

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

fnpowlatentity1lovs（）{
这是http
.get（“https://reqres.in/api/products/", {})
.订阅（（res）=>{
this.testData=res；
});
}
搜索：OperatorFunction=（text$：Observable）=>
文本$.pipe(
去BounceTime（200），
distinctUntilChanged（），
映射（term=>term.length<2？[]：
this.testData.filter（v=>v.toLowerCase（）.indexOf（term.toLowerCase（））>-1.slice（0,10））
)

演示：
您能告诉我如何获得提前输入选项吗？

HTML

<input id="typeahead-http" type="text" 
  class="form-control mx-sm-3" 
  [class.is-invalid]="searchFailed" 
  [(ngModel)]="model" 
  [ngbTypeahead]="search" 
  [inputFormatter]="formatter"
  [resultFormatter]="formatter"
  placeholder="Product search" />

---

演示：

什么不起作用，你会遇到什么错误？看看stackblitz演示，模板似乎绑定到了错误的属性。您正在将http请求的结果保存在

testData

中，但模板正在尝试显示

model

。将该属性更改为

testData

后，将显示结果。FY:你可能想考虑在这里使用SwitcMax，以减少keyupHi Naveen上所有HTTP请求的开销，如果可能的话，你能提出这个问题吗？

@Injectable(
  {
    providedIn: 'root'
  }
)
export class ProductService {
  constructor(private http: HttpClient) {}

  search(term: string) {
    if (term === '') {
      return of([]);
    }

    return this.http.get<any>(PRODUCTS_URL).pipe(
        map(response => response.data), //since the response is wrapped in a data object
        tap(res => console.log({res}))
      );
  }
}

search: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    tap(() => this.searching = true),
    switchMap(term =>
      this._service.search(term).pipe(
        tap(() => this.searchFailed = false),
        catchError(() => {
          this.searchFailed = true;
          return of([]);
        }))
    ),
    tap(() => this.searching = false)
  );

formatter = (x: {name: string}) => x.name;