Question

我正在尝试以tile格式显示div中的动态值，并根据statusIds [我在响应对象中获得]向这些分区添加特定类。

我可以使用以下代码实现此目的，

<div class="tile-card p-2" style="cursor: pointer;" [ngClass]="{'card-open': SRcounts.statusId == 1,
        'card-wait': SRcounts.statusId == 2,
        'card-assign': SRcounts.statusId == 3,
        'card-vip': SRcounts.statusId == 4,
        'card-email': SRcounts.statusId == 14,
        'card-voice': SRcounts.statusId == 7,
        'card-nms': SRcounts.statusId == 8,
        'card-requested': SRcounts.statusId == 9,
        'card-approval': SRcounts.statusId == 10,
        'card-subassign': SRcounts.statusId == 11,
        'card-change-1': SRcounts.statusId == 12,
        'card-change-2': SRcounts.statusId ==13,
        'card-change-3': SRcounts.statusId ==16,
        'card-change-4': SRcounts.statusId ==15,'card-change-5': SRcounts.statusId ==25}" data-toggle="tooltip" title="{{SRcounts.statusLable}}">
        <p class="status">{{SRcounts.statusLable | slice:0:11}}..</p>
        <p class="number">{{SRcounts.statusCount | number}}</p>
      </div>

但我希望减少这些多项检查，有没有办法可以在我的类名中获取statusId？

如何实现[ngClass] =＆＃34; {＆＃39; card-status - ＆＃39; + SRcounts.statusId}＆＃34;

Answer 1

也许这有效：

//define an array in the component with the css class names
SRcountsStatuses = ['card-open', 'card-wait', 'card-assign', /* etc...*/];

//in the template, access the class name you need by its index
[ngClass]="SRcountsStatuses[SRcounts.statusId]"

NgClass具有动态值

1 个答案: