在运行时从Typescript有条件地在HTML页面上呈现消息[Angular]

Question

我是Angular的新手。因此，我可能无法正确提出问题。我事先表示歉意。我也尝试过this问题。我已经为我的MEAN stack应用程序创建了一个登录表单。使用email和password字段的简单登录。我的打字稿文件决定了登录是否成功。这是我的代码。

login.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
...

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  flag= {
    valid: true
  }

  ...

  constructor( private _auth: AuthService, private _router: Router) {
  }

  ngOnInit() {
  }


  onSubmit() {
    this._auth.loginUser(this.loginUserData)
    .subscribe(
      res => {
        ...
      },
      err => {
        this.flag.valid=false,
        document.querySelector('#login-denied').innerHTML="hello";
      }
    )
  }
}

在上面的文件中，flag是一个布尔变量。真表示值确定，否则表示假。

这是我的html代码 login.component.html

<form>
  <div class="form-group">
      USERNAME FIELD
  </div>

  <div class="form-group">
      PASSWORD FIELD
  </div>
  <button type="submit" (click)="onSubmit()">Submit</button>

  <span *ngIf="flag.valid===false" id="login-denied">
      <i class="fa fa-times-circle" style="color:firebrick;"></i>
  </span>
</form>

请更加注意我的span标签。请纠正我。我正在

  

“ document.querySelector（...）为空”

这也是。

如您所见。 fa图标在那里。但是没有消息。

Answer 1

在您的登录组件中添加一个字符串属性“ message”

export class LoginComponent implements OnInit {
  message: string = '';
  …
}

在您的提交方法中

onSubmit() {
  this._auth.loginUser(this.loginUserData)
  .subscribe(
    res => {
      ...
    },
    err => {
      this.flag.valid=false,
      this.message = "hello";
    }
  )
}

在您的html

<span *ngIf="!flag.valid" id="login-denied">
  <i class="fa fa-times-circle" style="color:firebrick;">{{message}}</i>
</span>

致谢

Answer 2

为什么需要这样做

document.querySelector

因为您可以使用一个更合适的角度变量

 error message="";
// When error occurred set the message variable

在错误函数中类似

err => {
        this.flag.valid=false;
this.errorMessage ="Some Error";
        }

并像这样将其绑定到html

<span *ngIf="flag.valid===false" id="login-denied">
      <i class="fa fa-times-circle" style="color:firebrick;"></i> {{errorMessage}}
  </span>