Angular 混合了字符串和对象的ngClass

我需要向元素添加几个类。在我的例子中，问题是一个类是一个简单的字符串，

'start-'+i

，另一个是有条件的

{'is-active'：我尝试如下：

<li [class]=" i <= totalStars ? 'start-' + i + ' is-active' : 'start-' + i ">
        ...
</li>


...


请参见
尝试以下方法：

<li [class]=" i <= totalStars ? 'start-' + i + ' is-active' : 'start-' + i ">
        ...
</li>


...


请参见
添加字符串
start-{{i}}
作为单独的类，并在
[ngClass]
中使用条件类

<ul>
    <li *ngFor="let start of starts; let i = index" class="start-{{i}}" [ngClass]="{'is-active': i < totalStars}">...</li>
</ul>





您不必使用
ng容器
您可以直接在
li
上应用
*ngFor
，添加字符串
start-{{i}}
作为单独的类，并在
[ngClass]
中使用条件类

<ul>
    <li *ngFor="let start of starts; let i = index" class="start-{{i}}" [ngClass]="{'is-active': i < totalStars}">...</li>
</ul>





您不必使用
ng容器
您可以直接在
li
上应用
*ngFor
什么是
totalStars
？为什么从模板调用函数：
getClasses（i）
什么是
totalStars
？为什么从模板调用函数：
getClasses（i）
这很接近，但我始终需要
'star-'+I
，这不是可选的，
处于活动状态
检查修改后的答案感谢您的解决方案。您的解决方案的可扩展性不太好。如果在某些时候添加了类，它可能会变得复杂或不再工作。这很接近，但我始终需要
'star-+I
，该选项不是可选的，
处于活动状态
检查修改后的答案谢谢您的解决方案。您的解决方案的可扩展性不太好。如果在某些时候添加了类，它可能会变得复杂或不再工作。谢谢，就是这样。我在这里使用了
ng容器
来提高易读性，就是这样。我使用了
ng容器
此处仅用于提高可读性
<ul>
    <li *ngFor="let start of starts; let i = index" class="start-{{i}}" [ngClass]="{'is-active': i < totalStars}">...</li>
</ul>