ngFor 会触发 Bootstrap 布局中的附加行

Question

我目前正在将我的一个玩具应用程序的前端从 Jinja2 生成的 HTML 代码迁移到 Angular。新旧版本均使用Bootstrap作为CSS/JS框架（同时从3.3升级到5.3）。

在我的旧代码中的一处，我使用 Jinja2

for

在网格元素中生成动态数量的按钮。由于存在三种明显不同类型的按钮，因此我在循环中使用了

ig-then-else

结构。精简后的代码如下所示：

<DIV CLASS="col-4">
    {% for period in periods %}
        {% if period == 0 %}
            <BUTTON TYPE 1> </BUTTON>
        {% elif period < 0 %}
            <BUTTON TYPE 2> </BUTTON>
        {% else %}
            <BUTTON TYPE 3> </BUTTON>
        {% endif %}
    {% endfor %}
</DIV>

此代码生成以下输出

这正是我想要的：所有按钮并排放置，占用尽可能小的空间。

对于 Angular 中的新代码，我想保留使用

if-then-else

块来区分按钮类型的一般方法。因此，对于 Angular，我需要一个包含

ngFor

条目的标签。我认为通用的

<div></div>

块可以完成这项工作：

<DIV CLASS="col col-4">
    <DIV *ngFor="let period of periods">
        <DIV *ngIf="period == 0">
          <BUTTON TYPE 1></BUTTON>
        </DIV>
        <DIV *ngIf="period < 0">
          <BUTTON TYPE 2></BUTTON>
        </DIV>
        <DIV *ngIf="period > 0">
          <BUTTON TYPE 3></BUTTON>
        </DIV>
    </DIV>
</DIV>

但是，输出变为

当我查看页面的动态模型时，我看到了这一点：

ngFor

和

ngIf

指令插入（按预期）

<div></div>

按钮周围的块，这显然会混淆 Bootstrap，尽管这些块不包含任何Bootstrap类。

一个明显的解决方案是将

ngFor

移动到

<button>

元素，并通过激活/停用按钮的属性来处理所有类型差异。然而，恕我直言，这会使代码的可读性大大降低。

有没有办法选择不同的标签来保存

ngFor

这对 Bootstrap 来说不那么混乱？ （顺便说一句：我尝试使用一个组合标签，但这会触发 Angular 编译器的模型检查，我不想停用该检查）。

或者有没有办法轻松告诉 Bootstrap 忽略那些虚拟

<div></div>

块？

或者还有另一种完全不同的解决方案吗？

非常感谢！

Answer 1

div

是一个块元素，因此它跨越整个宽度。您可以更改其显示，或使用一些内联元素。

但更好的是，使用 ng-container ，它不会向 DOM 添加元素：

<DIV CLASS="col col-4">
    <ng-container *ngFor="let period of periods">
        <ng-container *ngIf="period == 0">
          <BUTTON TYPE 1></BUTTON>
        </ng-container>
        <ng-container *ngIf="period < 0">
          <BUTTON TYPE 2></BUTTON>
        </ng-container>
        <ng-container *ngIf="period > 0">
          <BUTTON TYPE 3></BUTTON>
        </ng-container>
    </ng-container>
</DIV>