Question

我是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>

Answer 1

LWC的表达与光环和视觉力的表达不同

您需要在控制器中定义模板用于表达式的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>

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

Answer 2

在HTML模板中使用此代码-切记不要在根“ template”元素中放置任何属性，而应将另一个div用作for：each指令的持有者。您必须使用键指令为每个项目分配唯一的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函数中构建的。在那里，我们可以放置一些条件，并在数组内的Objects中添加“ 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';
        })
    }
}

Answer 3

您可以使用if：true或if：hide。浏览此https://salesforcelightningweb.com/#conditionally-render-html-in-lightning-web-component

LWC中的隐藏/显示按钮

3 个答案: