javascript - 이 유효성 검사기에서 "정의되지 않은 'http'속성을 읽을 수 없음"이 나타나는 이유는 무엇입니까?

주어진 사용자 이름이 이미 존재하는지 확인하는 반응 양식 제어를위한 비동기 유효성 검사기를 만들려고합니다. 다음은 비동기 유효성 검사기 코드입니다.

userdata.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class UserdataService {
   private apiUrl = 'http://apiurl.com/api'; // its not the real url, im just not posting it for privacy reasons
   constructor(private http: HttpClient) {}
   checkUsername(control: FormControl): Promise<any> | Observable<any> {
    let isUsernameValid;
    return new Promise<any>(
      (resolve, reject) => {
        this.http.get(this.apiUrl + '/users?name='+control.value).subscribe(
          response => {
            isUsernameValid = response;
        });
        if (isUsernameValid === 'false') {
          resolve({'usernameIsInvalid': true})
        } else {
          resolve(null);
        }
      }
    );
  }
}

이 유효성 검사기를 시도하면이 오류가 발생합니다. "core.js : 4197 오류 유형 오류 : 정의되지 않은 'http'속성을 읽을 수 없습니다."

자, 나는 errr이 'this'를 사용하는 것과 관련이 있다고 생각하지만 왜 작동하지 않는지 이해할 수 없습니다 ... 그것은 나를 미치게 만들었 기 때문에 나는

console.log(this.apiUrl)

함수 내부, 약속 외부, 시도하기 위해 동일한 오류가 발생했습니다. "core.js : 4197 ERROR TypeError : Cannot read property 'apiUrl'of undefined"...

누군가 내가 뭘 잘못하고 있는지 설명해 주시고 해결 방법을 알려 주시면 감사하겠습니다.

편집하다:

아래와 같이 반응 형 ts 파일에서 내 서비스를 호출합니다.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { CustomValidatorsService } from '../services/custom-validators.service';
import { LocationService } from '../services/location.service';
import { UserdataService } from '../services/userdata.service';
@Component({
  selector: 'app-userdata-form',
  templateUrl: './userdata-form.component.html',
  styleUrls: ['./userdata-form.component.scss']
})
export class UserdataFormComponent implements OnInit {
  userdataForm: FormGroup;
  provinces: any = null;
  provincesLoading = false;
  cities: any = null;
  citiesLoading = false;
  constructor(
    private locationService: LocationService,
    private userdataService: UserdataService,
    private customValidators: CustomValidatorsService,
    private router: Router,
    private route: ActivatedRoute
    ) { }
  ngOnInit(): void {
    this.formInit();
    this.loadProvinces();
  }
  formInit() {
    let dni: number = null;
    let firstname: string = null;
    let lastname: string = null;
    let email: string = null;
    let mobile: number = null;
    let phone: number = null;
    let birthdate: Date = null;
    let username: string = null;
    let password: string = null;
    this.userdataForm = new FormGroup({
        // ... a lot of controls before ...
        'username': new FormControl(username, [
          Validators.required,
          Validators.minLength(3),
          Validators.maxLength(30),
          Validators.pattern(/^[a-zA-ZÀ-ÿ\u00f1\u00d1]+(\s*[a-zA-ZÀ-ÿ\u00f1\u00d1]*)*[a-zA-ZÀ-ÿ\u00f1\u00d1]+$/)
        ], this.userdataService.checkUsername), // <-- here's the async validator
        // ... form continues...
  }
  loadProvinces() {
    this.provincesLoading = true;
    this.locationService.getProvinces().subscribe(response => {
      this.provinces = response;
      this.provincesLoading = false;
    });
  }