在 Angular 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=...(?)}

实际上我知道在角度教程中使用ngIf隐藏空白细节可以类似于使用ngIf隐藏空白细节，但是问题是我无法将该代码更改为我想要的代码。因为在那个例子中，有英雄，我不知道我应该用什么来代替它。 请以最简单的方式帮助我，这将是你的同类。

Answer 1

当您单击按钮时，将执行您输入(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 2

只需将变量设置为true

onSelect() {
this.selectedBtn = true;
}

Answer 3

ngIf

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

this.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>