根据记录数据 lwc 动态设置 css 类答案

【问题标题】：Dynamically set css class based on record data lwc根据记录数据 lwc 动态设置 css 类
【发布时间】：2020-07-15 14:19:33
【问题描述】：

我想根据特定卡的记录数据设置 css 类，而不是所有卡的相同类，所以我无法在这里使用 getter，因为我无法传递记录数据有事件。

下面是 HTML 的小 sn-p：

<lightning-card title={objData.sName}>
    <p class="slds-p-horizontal_small">
        <lightning-badge label=""  data-id={objData.bIsOneActive}></lightning-badge>
        <lightning-badge label=""  data-id={objData.bIsTwoActive} ></lightning-badge>
        <lightning-badge label=""  data-id={objData.bIsThreeActive}></lightning-badge>
    </p>
</lightning-card>

上面的闪电卡在网格列内，所以我将为每张闪电卡设置 3 个徽章，并且根据 bIsActive 的值，我想为相应的闪电徽章设置类（设置如果为 true，则类为活动）。

下面我也试过了，但是报错：

let targetId = true;
let badgeClass = this.template.querySelectorAll(`[data-id="${targetId}"]`);

for (let i = 0; i < this.badgeClass.length; ++i) {
    badgeClass[i].className = "active";
}

上面的代码在badgeClass的长度上会抛出一个错误，

所以我也试过了：

let targetId = true;
let badgeClass = this.template.querySelectorAll(`[data-id="${targetId}"]`);

for (let i = 0; i < this.dataList.length; ++i) {
    badgeClass[i].className = "active";
}

我使用上面的原始数据列表来获取长度，因为每条记录都会有一个来自 bIsOneActive、bIsTwoActive、isThreeActive 的值作为 true，因此 this.template.querySelectorAll([data-id="${targetId}"]) 返回的记录大小应该等于原始数据列表的长度.

我一直在摸索，试图找到一种方法来实现这一点。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript css salesforce-lightning

【解决方案1】：

直接在记录上设置类怎么样：

{
    bIsOneActive: true,
    bOneClass: 'active',
    bIsTwoActive: true,
    bTwoClass: 'active',
    bIsThreeActive: true,
    bThreeClass: 'active',
}

所以在你的 HTML 中你可以这样做：

<lightning-card title={objData.sName}>
    <p class="slds-p-horizontal_small">
        <lightning-badge label="" class={objData.bOneClass}></lightning-badge>
        <lightning-badge label="" class={objData.bTwoClass}></lightning-badge>
        <lightning-badge label="" class={objData.bThreeActive}></lightning-badge>
    </p>
</lightning-card>

另一种有效的方法可能是：

<lightning-card title={objData.sName}>
    <p class="slds-p-horizontal_small">
        <lightning-badge label="" if:true={objData.bIsOneActive} class="active"></lightning-badge>
        <lightning-badge label="" if:false={objData.bIsOneActive}></lightning-badge>
        <lightning-badge label="" if:true={objData.bIsTwoActive} class="active"></lightning-badge>
        <lightning-badge label="" if:false={objData.bIsTwoActive}></lightning-badge>
        <lightning-badge label="" if:true={objData.bIsThreeActive} class="active"></lightning-badge>
        <lightning-badge label="" if:false={objData.bIsThreeActive}></lightning-badge>
    </p>
</lightning-card>

【讨论】：