angular 9: Множество условий для ngClass внутри ngFor

#css #angular #ng-class

Вопрос:

У меня возникли некоторые проблемы при попытке напечатать типичный виджет с рейтингом звезд на моей странице с помощью angular. Вероятно, будет более простой способ показать их с помощью css, но пока я хотел сделать это с помощью кода.

 <i *ngFor="let star of this.stars" [ngClass]="{
    'score__star fas fa-star': star === 'full',
    'score__star fas fa-star-half-alt': star === 'half', 
    'score__star far fa-star': star === 'empty'
    }"></i>

это код виджета, а это содержимое массива звездочек:

 (5) ["full", "full", "half", "empty", "empty"]

я не уверен, почему chrome правильно отображает первые 2, но не остальные. Из того, что я видел в отладчике, есть части класса, которые пропущены…

 <i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class=""></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class=""></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="fas fa-star-half-alt"></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="score__star far fa-star"></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="score__star far fa-star"></i>

Есть идеи о том, чего мне не хватает? Я также пытался смешать class и ngClass, чтобы разделить общую часть стиля, но у меня была та же проблема.

Большое спасибо!

1. Выглядит нормально. Попробуйте напечатать {{звездочку}} внутри i и посмотрите, что это показывает?

2. Только что протестировал это, и тексты в порядке

3. В таком случае.. Боюсь, я понятия не имею. Есть ли что-нибудь еще в компоненте или шаблоне, которое может повлиять на эти классы?

4. Если я помещаю элементы с жестко заданным стилем в атрибут class, он работает нормально… Так что я думаю, что нет, но я не эксперт по css even или angular

Ответ №1:

Я вижу одно решение этой проблемы. Не могли бы вы изменить свои классы, например:

 getClasses(star) {
  return {
    'full' : star === 'full',
    'half' : star === 'half', 
    'empty' : star === 'empty' 
}}

Также я не уверен, знаете ли вы это, но вы можете передать метод директиве ngClass

 <i *ngFor="let star of stars" [ngClass]="getClasses(star)">
  {{star}}
</i>