Angular Material Autocomplete observable 在选择下拉选项时触发额外的 API 调用

Question

每次单击下拉菜单时，都会调用 GET API 来重新填充列表！我已经在 ngOnInit() 上进行了此调用，并且每次进行选择时（或仅当我仅单击下拉菜单时）都不需要这些额外的 API 调用，因为这些可能会很昂贵！

.ts 文件:

...
allEmployees: Observable<Employee[]>;
filteredEmployees: Observable<Employee[]>;

ngOnInit() {
    this.getEmployees();
    this.filteredEmployees = this.theHod.valueChanges
    .pipe(
      startWith(''),
      switchMap(value => this.filterEmployees(value))
    );
}

getEmployees(): void {
    this.allEmployees = this.apiService.getAll(globals.EMPLOYEE_ENDPOINT);
}

private filterEmployees(value: string | Employee) {
    let filterValue = '';
    if (value) {
      filterValue = typeof value === 'string' ? value.toLowerCase() : value.firstName.toLowerCase();
      return this.allEmployees.pipe(
        map(employees => employees.filter(employee => employee.firstName.toLowerCase().includes(filterValue) || employee.lastName.toLowerCase().includes(filterValue)))
      );
    } else {
      return this.allEmployees;
    }
}

displayHodFn(employee?: Employee): string | undefined {
    return employee ? employee.firstName + ' ' + employee.lastName : undefined;
}

get theHod() {
    return this.rForm.get('hod');
}
...

.html 文件:

...
<mat-form-field>
    <input type="text" placeholder="Select head of department" matInput formControlName="hod" [matAutocomplete]="Hodauto">
    <mat-autocomplete #Hodauto="matAutocomplete" [displayWith]="displayHodFn">
      <mat-option *ngFor="let employee of filteredEmployees | async" [value]="employee">
        {{employee.firstName}} {{employee.lastName}}  [{{employee.empCode}}]
      </mat-option>
    </mat-autocomplete>
</mat-form-field>
...

任何 help/hint 将不胜感激

Answer 1

虽然，我无法理解你的完整代码（在我看来，它可以写成更简化的形式）。这是您可以解决问题的一件事。

修改getEmployees()如下

getEmployees(): void {
            this.allEmployees = Observable.of(_);
            this.apiService.getAll(globals.EMPLOYEE_ENDPOINT).subscribe(_ => {
            this.allEmployees = Observable.of(_);
            })
        }

Answer 2

此问题与此类似：

向可观察对象添加 .pipe(shareReplay(1)) 解决了问题。

Angular Material Autocomplete observable 在选择下拉选项时触发额外的 API 调用

Angular Material Autocomplete observable fires additional API call when selecting dropdown option

observable

angular-material

angular

angular-material-7