[英]Lightning Web Component setting dynamic style not working as expected
I'm currently trying to render a specific class across two lightning-badge components that is suppose to change both badges from inverse to success, but am getting this instead:我目前正在尝试跨两个闪电徽章组件渲染一个特定的类,该组件假设将两个徽章从反向更改为成功,但我得到了这个:
When the value on the left badge equals the value on the right (so in this case both are 3), they should both be green, otherwise they should both be grey.当左边徽章上的值等于右边的值时(所以在这种情况下都是 3),它们都应该是绿色的,否则它们都应该是灰色的。 They should never be seperate colours.它们不应该是单独的颜色。 The value on the left increases as the user saves a record and is checked on status of "Completed".当用户保存记录并检查“已完成”状态时,左侧的值会增加。 For some reason only the class on the second badge is being updated with the new class that includes slds-theme_success.出于某种原因,只有第二个徽章上的类被更新为包含 slds-theme_success 的新类。 I may be missing something small, but just haven't been able to figure it out.我可能会遗漏一些小东西,但只是无法弄清楚。 Please see code below:请看下面的代码:
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>
Have you tried moving badgeClass
to a getter?您是否尝试过将badgeClass
移至吸气剂? Something like this:像这样的东西:
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}`
}
I suspect LWC field tracking has some precautionary mechanism and didn't trigger the update.我怀疑 LWC 现场跟踪有一些预防机制并且没有触发更新。
I am not sure but perhaps if 0 records are available you want the badges to remain gray?我不确定,但也许如果有 0 条记录可用,您希望徽章保持灰色? In that case include this.patientsTotal > 0
in the get badgeClass() {...}
.在这种情况下,在get badgeClass() {...}
中包含this.patientsTotal > 0
。
Happy coding.快乐编码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.