如何在Angular 2中显示和隐藏由动态按钮触发的动态div

Question

我使用点击事件和一些简单的javascript来完成这项工作，但我确信有更好的方法。

我正在使用ngFor生成一些动态行和相应的动态按钮。

他们看起来像这样：

<div *ngFor="let section of data.order?.sections" id="{{section.class}}Detail" class="{{section.name | lowercase | removeAmpersand | removeSpaces }}">Random Text Here</div>

然后在页面的其他地方有一个使用ngFor：

生成的锚标记列表

<a (click)="showDetails($event)" id="{{section.name | lowercase | removeAmpersand | removeSpaces }}"><span class="icomoon icomoon-eye"></span> Detail/a>

我的问题是，我可以显示和隐藏div的首选方式是什么？每个div都以display: none的css属性开始，我希望只是切换它。相反，我只是使用click事件来运行获取div id的函数，然后我有一些看起来像这样的纯javascript：

myDiv.style.display = myDiv.style.display === '' ? 'block' : '';

我该怎么做才是首选方法？

Answer 1

您可以有条件地将css类添加到元素中。 像

这样的东西

<div class="standardclass" [class.additionalclass]="showFlag"></div>

其中additionalclass是另一个css类，只有在表达式showFlag为真时才会添加。它可以是任何js表达式，而不仅仅是一个标志。

您还可以使用*ngIf从dom中有条件地添加或删除元素。

搜索“Angular 2模板语法”

Answer 2

你可以为你的部分创建一个模型，然后将foreach绑定到模型，作为模型的一部分，你可以有一个可见性的布尔值，你可以在循环中使用它决定隐藏或显示。

您的按钮会切换可见的布尔值，然后您可以依靠Angular2在模型更改时更新ui。

将代码更改为此样式会有一些工作，但优点包括更清晰的HTML，可能更好的可维护性和单元测试的能力。