在角度2的分量中使用html数据的方法（方法）是什么？

Question

在角度2中，有一个按钮，当我点击它时，我想要一个div出现。

<button class="dokme" type="button" (click)="onSelect(signUp)" >Register</button>
<div *ngIf="selectedBtn">
  <div>Hello</div>
</div>

我无法完成我的组件，因为我不知道应该如何编写它：

onSelect():void{
  this.selectedBtn=...(?)}

实际上我知道它可以与＆＃34;在角度教程Hide the empty detail with ngIf中使用ngIf＆＃34; 隐藏空白细节，但问题是我不能将代码更改为我想要的。因为在那个例子中有英雄，我不知道应该替换它。 请以最简单的方式帮助我。

Answer 1

只需将变量设置为true

即可

onSelect() {
  this.selectedBtn = true;
}

Answer 2

单击按钮时，将执行(click)中的表达式。

如果传递给*ngIf的表达式为true，则元素内的内容将出现在页面上。否则，它不会。

因此，您需要做的是在selectedBtn事件发生时更改(click)的值。

模板

<button class="dokme" type="button" (click)="onSelect()" >Register</button>
<div *ngIf="selectedBtn">
  <div>Hello</div>
</div>

组件

onSelect() {
  this.selectedBtn = true
}

Answer 3

ngIf以与其他编程语言中的if语句类似的方式工作，因此它检查条件以及是否为true（或者如果条件中调用的函数返回{{1} }}）。在这种情况下，您的true与组件变量ngIf相关联，因此您只需将其设置为selectedBtn：

true

Answer 4

更轻松的是，您无需在控制器中创建新功能即可实现理智的目标。

<button class="dokme" type="button" (click)="selectedBtn=true" >Register</button>
<div *ngIf="selectedBtn">
  <div>Hello</div>
</div>

或者如果您想要按钮切换：

<button class="dokme" type="button" (click)="selectedBtn=!selectedBtn" >Register</button>
<div *ngIf="selectedBtn">
  <div>Hello</div>
</div>