如何避免* ngFor循环中出现空格？

幸运的利基

我使用fontawesome fa fa-star和在Angular中创建了一个星级评分组件far fa-star。

这是HTML输出，我想在组件内部。

<div style="font-size: 80%">
    <i class="fa fa-star"></i>
    <i class="fa fa-star"></i>
    <i class="fa fa-star"></i>
    <i class="fa fa-star"></i>
    <i class="far fa-star"></i>
</div>

如果我使用Loop做这件事，那我莫名其妙地在星星之间获得了空间

<div style="font-size: 80%">
    <ng-container *ngFor="let i of [1,2,3,4,5]">
        <i class="{{i <= 4 ? 'fa' : 'far'}} fa-star"></i>
    </ng-container>
</div>

但这是通过使循环成为一体而解决的。因此，删除代码中的换行符或将*ngFor...零件切换到<i>Tag并删除<ng-container>都会解决此问题。

<div style="font-size: 80%">
    <ng-container *ngFor="let i of [1,2,3,4,5]"><i class="{{i <= 4 ? 'fa' : 'far'}} fa-star"></i></ng-container>
</div>

<!-- Both work -->

<div style="font-size: 80%">
    <i *ngFor="let i of [1,2,3,4,5]" class="{{i <= 4 ? 'fa' : 'far'}} fa-star"></i>
</div>

那么，如何在不确保ngFor循环仅在一行上的情况下实现这一目标呢？

迭代主体有换行符时如何防止空格？

rh16

这是由于<i>标签是内联的，因此HTML将标签之间的空格视为空格。

一种解决方法是将font-size设置为零，然后在子元素上将其取消为零：

<div style="font-size: 0">
    <ng-container *ngFor="let i of [1,2,3,4,5]">
        <i style="font-size: 80%" class="{{i <= 4 ? 'fa' : 'far'}} fa-star"></i>
    </ng-container>
</div>

您可以在本文中阅读有关该问题以及此解决方案和其他解决方案的更多信息。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。