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

【问题标题】：How can I show and hide dynamic divs triggered by dynamic buttons in Angular 2如何显示和隐藏由 Angular 2 中的动态按钮触发的动态 div
【发布时间】：2016-07-15 02:36:08
【问题描述】：

我使用点击事件和一些普通的 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 属性开始，我希望只是切换它。相反，我只是使用点击事件来运行一个获取 div id 的函数，然后我有一些看起来像这样的纯 javascript：

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

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

【问题讨论】：

您找到有效的解决方案了吗？

标签： html css angular

【解决方案1】：

您可以有条件地将 css 类添加到您的元素中。类似的东西

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

其中additionalclass 是另一个css 类，仅当表达式showFlag 为真时才会添加。可以是任何js表达式，而不仅仅是一个flag。

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

搜索“Angular 2 模板语法”

【讨论】：

这对多个 div 有什么作用？例如。我有一个带有类硬件的 div，另一个带有类服务的 div，最后一个用于解决方案。现在，我有两个按钮，一个用于显示硬件，另一个用于服务和最终解决方案，但每个按钮都在一个循环中并且是动态生成的。也许这张发票没有服务，但它有硬件和解决方案。因为我事先不知道，所以它必须是可以用来显示它的各个部分但不影响其他部分的东西。
如果我理解正确，您基本上需要一堆标志。如果您在循环中创建所有内容，那么一组标志可能会起作用。如果您在 *ngFor 中创建按钮，您可以获得可用于索引标志数组的索引。这听起来很简单。

【解决方案2】：

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

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

将您的代码更改为这种样式需要一些工作，但优点包括更简洁的 html、可能更好的可维护性和单元测试的能力。

【讨论】：