如何解决html 模板文字 - 基于内部 div 迭代器属性隐藏外部 div (lit-html)
const CollectionItems = {
[
"samsung":{
"battery":"2200mAh","series":"S","region":"inside","instock":"Y","open-issues":4,"shipment-progress":"ontrack"
}
],[
"apple":{
"battery":"2800mAh","series":"11","region":"outside","open-issues":2,[
"Oppo":{
"battery":"3300mAh","series":"E","open-issues":7,"shipment-progress":"delayed"
}
],[
"Nokia":{
"battery":"2300mAh","series":"N","instock":"N","open-issues":5,"shipment-progress":"delayed"
}
],[
"OnePlus":{
"battery":"3800mAh","series":"6","open-issues":3,"shipment-progress":"ontrack"
}
]
}
现在,我正在尝试使用 lit-html 的重复指令(相当于 ngFor)遍历这个集合,我想隐藏所有落入“内部”区域的项目。我有一个类级变量“this.isInSideRegion”,其默认值为 false,如果我遇到内部区域项目,我会将其设置为 true。
return repeat(Object.entries(CollectionItems),(p) => p[0],(p) => {
return html`
<div class ='card' ?hidden = ${this.isInSideRegion === true }> <!-- hide this whole div if 'region' is inside -->
<label>p[0]</label>
<div class="container">
${p[1].map((l)=> html`
${l.region !== 'inside' ? html`
<span>${l.openIssues}</span>
<span>${l.instock}</span>
`: this.isInSideRegion = true }
`)}
</div>
</div>
`;
});
但对我来说,在内部区域的情况下,我仍然得到一个模板。例如:对于三星,我得到的模板为
samsung
false
我的期望是一个空模板
解决方法
"hidden" 属性在 lit-html 中没有任何意义。 “隐藏”指令是特定于角度的。您应该为 lit-html 使用“styleMap”或“classMap”指令来添加条件样式。有关详细信息,请参阅他们的样式 documentation。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。