【问题标题】:Add multiple classes to dynamic objects when it has already an ngClass condition Angular (4)当动态对象已经有 ngClass 条件 Angular (4) 时,将多个类添加到动态对象
【发布时间】:2026-01-26 23:55:01
【问题描述】:

我在定义特定类做动态元素时遇到了一些麻烦,看看这个 JSON:

filterData = {
    "highlights": {
        "title": "Destaques",
        "options": [{
            "id": 1,
            "title": "Outlet",
            "alias": "outlet",
            "counter": 3,
            "classes": ["outlet", "feb", "jun"]
        }, {
            "id": 2,
            "title": "Novidades",
            "alias": "news",
            "counter": 0,
            "classes": ["news", "may"]
        }, {
            "id": 3,
            "title": "Promoção",
            "alias": "promo",
            "counter": 1,
            "classes": ["promo"]
        }]
    }
}

每个按钮都有自己的 selected 类,这取决于它是否被用户选中:

<div
    *ngIf="filterEnabled"
    class="filters_btns"
>
    <button 
        *ngFor="let item of filtersList.options" 
        type="button" 
        class="btn"
        (click)="toggleFilterOption(item)"
        [ngClass]="{ 'selected': filterData[item.id]" <-- also add all of the classes of this array (item.classes) if some exists
    >{{ item.title }}</button>

</div>

有什么方法可以做到这一点?添加一个类数组(如果存在的话),同时根据filterData[item.id]添加'selected'类 (布尔值)

【问题讨论】:

    标签: angular typescript ng-class ngfor


    【解决方案1】:

    您可以为此使用类绑定:

    [class.selected]="filterData[item.id]" 
    

    以及为您列出的 ngClass:

    [ngClass]="item[classes]"
    

    【讨论】:

    • 感谢 Meir,它运行良好!只是一个小的更正,classes 是 item 的属性,所以它会像:item.classesitem['classes']
    • 你是对的。我专注于语法,而不是细节?