当动态对象已经有一个ngClass条件Angular时,添加多个类(4)
Add multiple classes to dynamic objects when it has already an ngClass condition Angular (4)
我在定义特定的 classes 做动态元素时遇到了一些麻烦,看看这个 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"]
}]
}
}
每个按钮都有其 选择 class,这取决于它是否被用户选择:
<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>
有什么办法吗?添加一个classes的数组(如果存在),同时根据filterData[item.id][=23=添加'selected'class ]
(布尔值)
您可以为此使用 class 绑定:
[class.selected]="filterData[item.id]"
和您列出的 ngClass:
[ngClass]="item[classes]"
我在定义特定的 classes 做动态元素时遇到了一些麻烦,看看这个 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"]
}]
}
}
每个按钮都有其 选择 class,这取决于它是否被用户选择:
<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>
有什么办法吗?添加一个classes的数组(如果存在),同时根据filterData[item.id][=23=添加'selected'class ] (布尔值)
您可以为此使用 class 绑定:
[class.selected]="filterData[item.id]"
和您列出的 ngClass:
[ngClass]="item[classes]"