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。