如何在Lit-Element中更改布尔属性以隐藏组件上的内容? [英] How can I change a Boolean property in Lit-Element to hide content on my component?

问题描述

我有一个自定义组件，当将boolean属性设置为false时，该组件应该隐藏内容.除该属性外，其他所有属性均得到反映.我一定做错了.

I have a custom component that should hide content when I set a boolean property to false. Every other property gets reflected except that one. I must be doing something wrong.

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

如果我在HTML文件中使用类似<my-component></my-component>的组件，则会显示:默认为预期值.

If I use that component like <my-component></my-component> in an HTML file it shows: default as expected.

如果我这样使用它:<my-component title="New Title"></my-component>它会显示:新标题如预期.

If I use it like this: <my-component title="New Title"></my-component> it displays: New Title as expected.

但是，如果我尝试将其隐藏<my-component title-enable="false"></my-component>，则布尔值不会改变.我已经尝试过！title-enable，title-enable ='false，.titleEnable = false以及您可以想象的所有变体.最让我感到恼火的是，每当我在构造函数中设置'this.titleEnable = false'时，我碰巧只是在标签上声明变量WITHOUT，而将其设为TRUE则显示默认".<my-component title-enable></my-component>我完全迷路了.

BUT if I try to hide it <my-component title-enable="false"></my-component> the boolean just doesn't change. I've tried !title-enable, title-enable='false", .titleEnable=false and all the variants you can imagine. What pisses me the most is that whenever I set in the constructor 'this.titleEnable=false' and I happen to just declare the variable WITHOUT value on the tag and it takes it as TRUE an "default" appears. <my-component title-enable></my-component> I am completely lost.

推荐答案

好的，这很棘手.您需要通过以下方式传递一些对象来不同地处理它:

Ok, this is a tricky one. You need to handle it differently by passing some object as below:

  static get properties() {
    return {
      titleConfig: {
        type: Object,
        attribute: 'title-config'
      }
    }
  }

  render() {
    return html`                
      ${this.titleConfig.titleEnable
        ? html`
      <p class="title" ?hidden="${!this.titleConfig.titleEnable}">${this.titleConfig.title}</p>
      `
        : html``} 
  `
  }

在 HTML 中:

<my-component title-config='{"title":"shan", "titleEnable": false}'></my-component>

现在，问题是为什么每次都是true?

Now, the question is why it is true every time?

答案::要使布尔属性可通过标记进行配置，它必须默认为false.如果默认设置为true，则不能从标记将其设置为false，因为属性的存在(带有或不带有值)都等于true.这是Web平台中属性的标准行为.

Answer: For a Boolean property to be configurable from markup, it must default to false. If it defaults to true, you cannot set it to false from markup, since the presence of the attribute, with or without a value, equates to true. This is the standard behavior for attributes in the web platform.

它取自聚合物doc .

因此，通过创建属性title-enable，HTML将此属性视为true

So, by creating an attribute title-enable, the HTML considers this attribute as true

对于开始研究Polymer或LitElement的人来说，这真是一个不小的惊喜.

It's really a bummer for someone who starts working on Polymer or LitElement .

这篇关于如何在Lit-Element中更改布尔属性以隐藏组件上的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！