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

Question

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

这是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>

如果我用循环做这件事，那我莫名其妙地在星星之间留出了空间

<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>标签并删除<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循环仅在一行上的情况下实现这一目标？

     

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

Answer 1

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

一种解决方法是将字体大小设置为零，然后在子元素上将其取消归零：

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

您可以在this article中了解有关该问题以及此解决方案和其他解决方案的更多信息。