如何通过打字稿改变标签的可见性

Question

我有一个最初隐藏的文本标签。单击按钮时，我想让它可见，但我没有这样做。如果有人可以帮助我，我会很高兴

HTML 代码

<label for="Validi"  class="validi" id="alert" >Invalid Credentials. Please try again</label>

SCSS 代码

.validi {
    color: red;
    font-weight: bold;
    visibility: hidden;
}

我想在单击按钮时通过我的打字稿文件将可见性更改为“可见”。

Answer 1

试试这个代码

.html

<label for="Validi" class="validi" id="alert" *ngIf="error">Invalid Credentials. Please try again</label>
<button (click)="showError()">Show Error</label> //OR
<button (click)="error=true">Show Error</label>

.ts

error: boolean = false;

showError(){
  this.error = true;
}

Answer 2

试试这个：

example.html

<label for="Validi" *ngIf="show" class="validi" id="alert" >Invalid Credentials. Please try again</label>
<button type="button" (click)="show = !show">Click me !</button>

example.ts

public show = true;

example.css

.validi {
  color: red;
  font-weight: bold;
}