如何更改 Lit-Element 中的布尔值属性以隐藏组件上的内容？

Question

我有一个自定义组件，当我将布尔值属性设置为 false 时应该隐藏内容。除了那个以外，其他属性都会被反映出来。我一定是做错了什么。

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> 这样的组件，它会显示：如预期的默认。

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

但是如果我试图隐藏它 <my-component title-enable="false"></my-component> 布尔值就不会改变。我试过 !title-enable, title-enable='false", .titleEnable=false 和你能想象到的所有变体。最让我生气的是，每当我在构造函数中设置 'this.titleEnable=false' 并且我碰巧在标签上声明了变量 WITHOUT value 并且它认为它是 TRUE 出现 "default"。<my-component title-enable></my-component> 我完全迷路了。

Answer 1

好的，这是一个棘手的问题。您需要通过传递一些对象来以不同的方式处理它：

  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？

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.

取自polymer doc.

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

对于开始从事 Polymer 或 LitElement 工作的人来说，这真是一个无赖。

Answer 2

根据 documentation:

要绑定到布尔属性，您需要使用“?”，表示法：

将 prop3 绑定到布尔属性：

html`<input type="text" ?disabled="${this.prop3}">`

如果表达式的计算结果为真值，则添加布尔属性；如果表达式的计算结果为假值，则删除布尔属性。

Answer 3

您也可以使用 reflected attributes 代替：

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

      titleEnable: {
        reflect: true,
      },
}

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

handleHidden() {
  return this.titleEnable === 'true'
}

render(){

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

Answer 4

这个问题是因为数据类型。在 lit-element 'false' | 'true' 类型作为 'string' 数据类型返回。

解决方案：

Before that check your attribute data type is string or boolean

     ex: typeof attr

If it return string means, you have two solution:
    1. Change the attributes date type as boolean ex: Boolean(attr).
    2. Consider the value as string and check your condition.

From your example 
    if(this.titleConfig.titleEnable == 'true'){
        //true statement
    }else{
        // false statement
    }

我的建议是this.titleConfig.titleEnable == 'true'

如何更改 Lit-Element 中的布尔值属性以隐藏组件上的内容？

How can I change a Boolean property in Lit-Element to hide content on my component?

javascript

html

polymer

web-component

lit-element

如何更改 Lit-Element 中的布尔值 属性 以隐藏组件上的内容？

How can I change a Boolean property in Lit-Element to hide content on my component?

javascript

html

polymer

web-component

lit-element

如何更改 Lit-Element 中的布尔值属性以隐藏组件上的内容？