Question

我需要向一个元素添加几个类。在我的情况下，问题是一个类是一个简单的字符串'start-' + i，而另一个是有条件的{'is-active': i <= totalStars}

我想这听起来很简单，但是当我尝试时，看起来却相反

<ul>
    <ng-container *ngFor="let star of stars; let i = index">
        <li [ngClass]="['star-' + i, {'is-active': i <= totalStars}]">....</li>
    </ng-container>
</ul>

上面的代码不起作用（未设置类）。我尝试过变化

[ngClass]="{'start-' + i: true, 'is-active': i <= totalStars}"
[ngClass]="'start-' + i" [ngClass]="{'is-active': i <= totalStars}"
[ngClass="['start-' + i, amount >= i ? 'is-active' : '']"

没有成功。有什么建议怎么做吗？

到目前为止最好的解决方案是使用一个函数来构造类

[ngClass]="getClasses(i)"

Answer 1

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

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

您不必使用ng-container，您可以直接在*ngFor上应用li。

Answer 2

尝试这样：

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

请参见Working Demo

ngClass混合了字符串和对象

2 个答案: