无法在Angular 7中使用http head方法使debounceTime工作

Question

任务是检查登录是否可免费使用或是否已被其他用户使用。为此，我使用HEAD请求，当响应带有 404状态代码时表示登录是免费的，如果响应带有 200状态代码则表示登录名已在由其他用户使用。每次当我在输入字段中输入单个字母时，它都会向服务器发出请求并起作用，，但是我尝试使用debounceTime和distinctUntilChanged在发出请求之前等待一秒钟，以免每次发送后都发送请求按键。然后从RxJS导入它。  从“ rxjs / operators”导入{debounceTime，distinctUntilChanged} 。但这对我不起作用。每次按键后仍会发出请求。这是我的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';
          }
        });
    }
  }

到此结束，这是我的Service head方法：

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;
}

我想再说一遍，我导入了所需的一切，等待您的建议。谢谢！