让 LWC 根据 Picklist 显示不同的正文信息

Question

我已经开始了下面的LWC。我正在尝试清理闪电页面上的富文本屏幕组件。目前有超过 12 个不同的组件基于选项列表值显示。我想将它们压缩成一个 LWC。因此，如果 Picklist Value = "1"，LWC 应在下方显示第一段代码消息。

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<Center>
    <H1>Attention:</H1>
    <p>Please be advised that this client was mailed <a href="https://mysecretlink" target="_blank">Message Link Text</a> letter on 12/1/2020 for the Legacy Secret Project. </p>

    <p>Please be advised that this client was mailed <a href="https://mysecretlink2" target="_blank">Message Link Text</a> letter on 12/1/2020 for the Legacy Secret Project. </p>
</Center>

我对 LWC 的了解非常有限，所以任何关于如何根据选择列表显示消息的建议都很棒！我真的很想只使用一个组件，它在一个对象上运行一个选项列表。

谢谢！

Answer 1

可以在lwc js文件中创建一个@track变量，将picklist的active值存入其中。

为不同的条件创建几个 getter。

在 lwc HTML 文件中，用模板标签包裹段落标签，并使用 if:true 指令和适当的 getter 作为值

示例：

在component.html中：

<template if:true={value1}>
    <p>text for value 1</p>
</template>

<template if:true={value2}>
    <p>text for value 2</p>
</template>

在component.js

@track picklistVal;

get value1(){
    return this.picklistVal == '1';
}
get value2(){
    return this.picklistVal == '2';
}

Answer 2

你可以尝试一种更简单的方法在上面的方法中需要定义多个getters和多个模板条件。如果您有大量的选项列表值，这可能会导致不正确的解决方案。 component.html

<p> {value} </p>

component.js

    get value(){
       if(this.picklistValue == 'value1'){
          return 'value1';
       }
     return '';
    }

让 LWC 根据 Picklist 显示不同的正文信息

Make LWC Display Different Body Messages Based on Picklist

salesforce

apex

salesforce-lightning

lwc