Логический ответ NgIf и HTTP GET, ошибка mat не отображается

Question

Я хочу проверить, если пользователь ввел логин, который уже находится в базе данных, для этого я отправляю HTTP GET в свой бэкэнд, я получил желаемый ответ (логическое значение), но <mat-error> не отображается на true:

EDIT: добавлена ​​глобальная переменная, чтобы определить, было ли найдено имя пользователя

. html:

<!--username-->
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" name="username" (keyup)="isUsernameTaken()"
formControlName="username" required>
<mat-error *ngIf="isUsernameUsed">This username is taken
</mat-error>
</mat-form-field>

.ts:

  isUsernameTaken(): boolean {
    let username = this.form.controls['username'].value;

    let url = "http://localhost:8080/public/available";
    let params = new HttpParams().set('username', username);

    this.http.get(url, { params: params }).subscribe(
      res => {
        this.isUsernameUsed = JSON.parse(res.toString());
      },
      err => {
        alert("error has ocured." + err);
      }
    );
  }

Answer 1

Вы оцениваете функцию, которая возвращает просто observable, а не значение из нее. Вы не можете вернуть данные из него, потому что это асинхронный . Вы можете использовать свойство, которому будет присвоен результат, и использовать его для логики остатка c

Разметка

<mat-error *ngIf="isUsernameTaken">This username is taken</mat-error>

Компонент

public isUsernameTaken: boolean;


isUsernameTaken(): boolean {
   let username = this.form.controls['username'].value;

   let url = "http://localhost:8080/public/available";
   let params = new HttpParams().set('username', username);

   this.http.get(url, { params: params }).subscribe(
     res => { 
       this.isUsernameTaken = JSON.parse(res.toString());
     },
     err => {
       alert("error has ocured." + err);
     }
   );
}

Answer 2

попробуйте это:

ts:

 usernameTaken = false;

 isUsernameTaken(): boolean {
    let username = this.form.controls['username'].value;

    let url = "http://localhost:8080/public/available";
    let params = new HttpParams().set('username', username);

    return this.http.get(url, { params: params }).subscribe(res => {
       this.usernameTaken = res;
    });
  }

html

*ngIf="usernameTaken"