NgIf 和 HTTP GET 布尔响应，未显示 mat 错误答案

【问题标题】：NgIf and HTTP GET boolean response, mat error does not showingNgIf 和 HTTP GET 布尔响应，未显示 mat 错误
【发布时间】：2020-01-26 16:06:24
【问题描述】：

我想验证用户是否输入了已经在数据库中的登录名，为此我将HTTP GET 发送到我的后端，我得到了所需的响应（布尔值），但<mat-error> 没有显示在true 上：

编辑：添加全局变量以确定是否找到用户名

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

【问题讨论】：

标签： angular angular-material angular-ng-if

【解决方案1】：

你评估函数，它只返回observable，而不是它的值。您无法从中返回数据，因为它是asynchronous。您可以使用将分配结果的属性并将其用于其余逻辑

标记

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

【讨论】：

instanceof(JSON.parse(res.toString())) 返回布尔值，所以它不是可观察的
@janlan 你返回的不是它，而是.subscribe()的结果，不是内部结果
@janlan 你需要在ngOnInit中调用你的函数
添加到ngOnInit 仍然没有在找到的用户名上抛出错误
@janlan 检查 api 调用后分配给变量的内容

【解决方案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"

【讨论】：