1

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

3 回答 3

2

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

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

看到这个迁移到 lwc

你最终会做一个像这样的吸气剂

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

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

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

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

于 2019-09-13T17:08:55.067 回答
0

在您的 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';
        })
    }
}
于 2019-11-25T21:19:22.110 回答
-1

You can use if:true or if:hide. Go through this https://salesforcelightningweb.com/#conditionally-render-html-in-lightning-web-component

于 2019-12-13T10:54:40.810 回答