Angular8 - 从 API 端点获取数据到自动完成 [关闭]

Posted 2023-03-13

【中文标题】Angular8 - 从 API 端点获取数据到自动完成 [关闭]

【英文标题】：Angular8 - Getting data to an autocomplete from an API endpoint [closed]

【发布时间】：2020-08-10 20:43:51

【问题描述】：

我正在尝试通过 API 休息响应（而不是本地数组）提供自动完成功能。

这就是我现在的代码：

TS 组件：

public filteredAddressees: Observable < Addressee[] > ;
public addresseesCtrl = new FormControl();

[...]

displayFnAddressee(): string | undefined 
  return undefined;


private _filterAddressees(value: string): Observable < Addressee[] > 
  console.log(`_filterAddressees($value)`);
  return this.addresseeService.getFilteredList(value.toLocaleLowerCase()).pipe(
    map((response: any) => 
      return response.items;
    )
  );


getFilteredAddressees() 
  console.log(`GetFilteredAddressees($this.addresseesCtrl.value)`);
  this.filteredAddressees = this.addresseesCtrl.valueChanges.pipe(
    startWith(''),
    debounceTime(500),
    switchMap(val => 
      console.log(`switchMap($val)`);
      document.getElementById('noFocus').blur();
      return this._filterAddressees(val || '');
    ));


selChangedAddressee(e: MatAutocompleteSelectedEvent) 
  this.addAddressee(e.option.value);

这是 html：

<mat-form-field class="full-width">
  <input matInput id="noFocus" placeholder="Add user" (click)="getFilteredAddressees()" [matAutocomplete]="auto" [formControl]="addresseesCtrl">
  <mat-autocomplete (optionSelected)="selChangedAddressee($event)" id="autocomplete" [displayWith]="displayFnAdressee" #auto="matAutocomplete">
    <mat-option *ngFor="let addressee of filteredAdressees | async" [value]="addressee">
       addressee.name   addressee.surname 
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

但显然它永远不会到达 switchMap 指令，如果我更改输入值，它也不会捕获 formControl valueChange 事件。

但是，如果我像这样捕获表单值的变化，它会在我每次更改值时做出反应：

this.addresseesCtrl.valueChanges.subscribe(val => 
        console.log('value changed', val);
    );

在浏览器控制台中，我没有收到任何类型的错误消息。

【问题讨论】：

你的console.logs 是否如你所愿？

它到达第一个console.log，即“GetFilteredAddressees(value)”，但没有到达“switchMap(value)”

这只是一个错字。您的代码没有任何问题。在您的代码中，您编写了 filteredAddressees，但在 html 中您编写了 filteredAdressees

天啊...非常感谢您，我完全失明了...

【参考方案1】：

由@bunyamin-coskuner 解决：

只是一个错字。您的代码没有任何问题。在您的代码中，您编写了过滤地址，但在 html 中您编写了过滤地址