Как избежать пробелов в циклах * ngFor в angular?
Я создаю компонент звездного рейтинга в Angular, используя потрясающий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>
Если я сделаю это с помощью 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>
Но это исправляется путем создания цикла oneliner. Таким образом, либо удаление новой строки в коде, либо переключение части *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>
So how do I achieve this without making sure that the
ngForloop is only on one line?How to prevent the space when the iteration body has a newline?
Добавление *ngFor к ngContainer реплицирует это, а не только <i>, и лучше использовать его только там, где он вам нужен, что в данном случае находится непосредственно в теге <i>, как вы сделали в следующем примере. Это не пробелы, это сам ngContainer вызывает пробелы. Вы достаточно лаконичны, чтобы не требовать дальнейших изменений во втором случае. Не чини то, что не сломано.
@PrashantPimpale Нет, жестко закодированный вариант предназначен только для демонстрации.
@LuckyLikey На самом деле не могу понять вопрос! Можете ли вы описать это? с ожидаемым и текущим результатом!
@AjitZero хорошее замечание. Однако, хотя <ng-container> не отображается в разметке HTML, я не понимаю, почему он вставляет новые строки.
@PrashantPimpale первый, жестко запрограммированный вариант - это ожидаемый результат. Я пытался сделать это динамически, это второй кодовый блок. Но это неловко добавило несколько пробелов. Поэтому я понял, как решить это в 3-м кодовом блоке. Вопрос как написано в заголовке как избежать пробелов в циклах * ngFor в angular?
@LuckyLikey не может воспроизвести:stackblitz.com/edit/angular-23ozms
@PrashantPimpale интересно. Знаете ли вы, если stackblitz использует окончание строки в стиле unix? Я использую Windows кстати.
@LuckyLikey На самом деле я точно не знаю!
@PrashantPimpale не смог найти никакой информации об этом. Однако пользователь rh16, похоже, может его воспроизвести. В любом случае, спасибо.
Ответы 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>
Подробнее о проблеме и этом и других решениях можно прочитать в эта статья.
звучит примерно так. Странно, почему я сам не нашел эту статью. Спасибо.
Итак, вы хотите, чтобы без цикла for? Так что попробуйте жестко закодированную иконку