Не удается заставить debounceTime работать, используя метод http head в Angular 7 - PullRequest
Новая
       21

Не удается заставить debounceTime работать, используя метод http head в Angular 7

0 голосов
/ 07 января 2019

Задача состоит в том, чтобы проверить, является ли логин бесплатным для использования или уже используется другим пользователем. Для этого я использую запрос HEAD, когда ответ приходит с кодом состояния 404 означает, что вход в систему бесплатный, если ответ приходит с кодом статуса 200 означает, что вход в систему уже используется другой пользователь. Каждый раз, когда я вписываю одну букву в поле ввода, он отправляет запрос на сервер, и он работает, , но я пытался использовать debounceTime и differentUntilChanged, чтобы подождать секунду перед выполнением запроса, чтобы не отправлять запрос после каждого нажмите клавишу . И я импортировал его из RxJS. import {debounceTime, differentUntilChanged} из 'rxjs / operator' . Но это не работает для меня. Запрос по-прежнему приходит после каждого нажатия клавиши. Вот мое поле ввода html. Он вызывает checkLogin () при каждом включении 

<input
            pInputText
            placeholder="Login"
            id="float-input-login"
            [(ngModel)]="teacher.login"
            name="login"
            [class.is-invalid]="login.invalid && login.touched"
            #login="ngModel"
            minlength="5"
            maxlength="20"
            (keyup)="checkLogin()"
          />

Вот мой компонент checkLogin () код метода: 

checkLogin() {
    this.loginStatus = '';
    if (this.teacher.login.length >= 5) {
      this._teacherServices
        .checkLoginTeacher(this.teacher)
        .pipe(debounceTime(1000),
        distinctUntilChanged())
        .subscribe(checkResponse => {
          if (
            checkResponse == null &&
            this.selectedTeacher.login !== this.teacher.login
          ) {
            this.loginStatus = 'The login is already in use';
          }
        });
    }
  }

Конец, вот мой метод руководителя службы: 

public checkLoginTeacher(teacher: Iteachers): Observable<Iteachers> {
    return this.http
      .head<Iteachers>(`/users/login/${teacher.login}/`)
      .map((response: any) => {
        return response;
      });
  }

и интерфейс: 

export interface Iteachers {
  firstname: string;
  lastname: string;
  patronymic: string;
  dateOfBirth: string;
  id: number;
  email: string;
  avatar: string;
  login: string;
  phone: string;
  newPass: string;
  oldPass: string;
}

Опять хочу сказать, что я импортировал все, что ему нужно, в ожидании ваших предложений. Спасибо!

...