Lightning Web 组件设置动态样式未按预期工作

Question

我目前正在尝试跨两个闪电徽章组件渲染一个特定的类，该组件假设将两个徽章从反向更改为成功，但我得到了这个：

当左边徽章上的值等于右边的值时（所以在这种情况下都是 3），它们都应该是绿色的，否则它们都应该是灰色的。 它们不应该是单独的颜色。 当用户保存记录并检查“已完成”状态时，左侧的值会增加。 出于某种原因，只有第二个徽章上的类被更新为包含 slds-theme_success 的新类。 我可能会遗漏一些小东西，但只是无法弄清楚。 请看下面的代码：

 badgeClass = "slds-badge_inverse slds-var-m-horizontal_x-small slds-col"; get patientsCompleted() { if(this.records) { let completedArr = this.records.filter(value => value.fields.Status__c.value == "Completed"); if(completedArr.length === this.patientsTotal) { this.badgeClass = "slds-badge_inverse slds-theme_success slds-var-m-horizontal_x-small slds-col"; } return completedArr.length; } }; get patientsTotal(){ if(this.records) { return this.records.length; } };

 <span class="slds-col_bump-left"> <div class="slds-grid slds-gutters"> <lightning-badge class={badgeClass} label={patientsCompleted}></lightning-badge> <div class="slds-col"> of </div> <lightning-badge class={badgeClass} label={patientsTotal}></lightning-badge> </div> </span>

Answer 1

您是否尝试过将badgeClass移至吸气剂？ 像这样的东西：

get patientsCompleted() {
  if(this.records) {
    let completedArr = this.records.filter(value => value.fields.Status__c.value == "Completed");
    // No longer needed
    // if(completedArr.length === this.patientsTotal) {
    //     this.badgeClass = "slds-badge_inverse slds-theme_success slds-var-m-horizontal_x-small slds-col";
    // }
    return completedArr.length;
    }
};

get patientsTotal(){
  if(this.records) {
    return this.records.length;
  }
};

get badgeClass() {
  let baseClass = "slds-badge_inverse slds-var-m-horizontal_x-small slds-col";
  return this.patientsCompleted === this.patientsTotal ? `${baseClass} slds-theme_success` : `${baseClass}`
}

我怀疑 LWC 现场跟踪有一些预防机制并且没有触发更新。

我不确定，但也许如果有 0 条记录可用，您希望徽章保持灰色？ 在这种情况下，在get badgeClass() {...}中包含this.patientsTotal > 0 。

快乐编码。