LWC 中的隐藏/显示按钮答案

【问题标题】：Hide/show Button in LWCLWC 中的隐藏/显示按钮
【发布时间】：2021-01-21 16:02:35
【问题描述】：

我是 Salesforce 的 LWC 新手，想隐藏/显示基于按钮的状态。我写了下面的代码，但它隐藏了所有状态。如果我错了，你能帮我吗？

 <template for:each={savedCampaignList} for:item="savedCampaignListvar">
       <a name={savedCampaignListvar.Id} >View</a> 
        &nbsp;|&nbsp; 
      <a hidden =!IF(savedCampaignListvar.Status === 'Saved')" name={savedCampaignListvar.Id} >Delete</a>

</template>

【问题讨论】：

标签： salesforce lwc

【解决方案1】：

LWC 中的表达方式与 aura 和 visualforce 中的不同

您需要在控制器中定义一个 getter，模板用于表达式或更新一个跟踪变量。

See this for migrating to lwc

你最终会做出这样的吸气剂

get hideLink() {
    return this.savedCampaignListvar.Status === 'Saved';
}

然后在你的 lwc 标记中你应该有这个

<template if:false={hideLink}>
    <a name={savedCampaignListvar.Id}>Delete</a>
</template>

注意：隐藏属性不是布尔属性。如果无论将其设置为 true/false，该属性都存在，则隐藏该元素。 See here

【讨论】：

谢谢。但是我在这里有一个循环来获取每个广告系列的状态，并且根据广告系列的状态应该是隐藏还是显示。我会更新完整的代码。
@RKCY 将每个项目作为属性传递给子组件并在那里进行检查，或者为集合中的每个项目添加一个属性以判断是否显示该项目

【解决方案2】：

在您的 HTML 模板中使用此代码 - 记住不要在根“模板”元素中放置任何属性，使用另一个 div 作为 for:each 指令的持有者。您必须使用 key 指令为每个项目分配唯一 ID。当列表更改时，框架使用该键仅重新呈现已更改的项目。模板中的键用于性能优化，在运行时不会反映在 DOM 中。

<template>
   <div for:each={savedCampaignList} for:item="savedCampaignListvar" key={savedCampaignListvar.Id}>
     <a name={savedCampaignListvar.Id} >View</a> 
                    &nbsp;|&nbsp; 
     <a if:true={savedCampaignListvar.shouldShow} name={savedCampaignListvar.Id} >Delete</a>
   </div>
</template>

我们可以使用connectedCallback 函数——它内置在将元素插入文档时调用的LWC 函数。在那里我们可以设置一些条件并向数组内的对象添加“shouldShow”（当然，如果您想要的话，您可以调用；））属性。基于此属性，我们将显示或不显示删除按钮。你的 JS 应该是这样的：

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track savedCampaignList = [
        {Id: "1", status: 'Saved'},
        {Id: "2", status: 'Not Saved'}
    ]

    connectedCallback() {
        this.savedCampaignList.forEach((el)=> {
            el.shouldShow = el.status === 'Saved';
        })
    }
}

【讨论】：

【解决方案3】：

您可以使用 if:true 或 if:hide。通过这个https://salesforcelightningweb.com/#conditionally-render-html-in-lightning-web-component

【讨论】：