Angular Наблюдаемое автозаполнение материалов вызывает дополнительный вызов API при выборе раскрывающегося списка - PullRequest
Новая
       50

Angular Наблюдаемое автозаполнение материалов вызывает дополнительный вызов API при выборе раскрывающегося списка

0 голосов
/ 02 августа 2020

Каждый раз, когда я нажимаю на раскрывающийся список, выполняется вызов 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>
...

Любая помощь / подсказка будет принята с благодарностью

Ответы [ 2 ]

0 голосов
/ 02 августа 2020

Эта проблема аналогична этой: Angular / Rx JS 6: Как предотвратить дублирование HTTP-запросов?

добавление .pipe(shareReplay(1)) к наблюдаемому решило проблему.

0 голосов
/ 02 августа 2020

Хотя я не смог понять ваш полный код (на мой взгляд, его можно написать в более упрощенной форме). Вот что вы можете сделать, чтобы решить вашу проблему.

измените getEmployees() как показано ниже 

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