как избежать пробелов в петлях * ngFor в угловых?

Question

Я создаю компонент Star-Rating в Angular, используя fontawesome fa fa-star и 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>

Если я сделаю это с помощью петли, я каким-то образом получу пробелы между звездами

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

Подробнее о проблеме, этом и других решениях можно прочитать в этой статье .