将对象值加载到 Polymer 3 组件

问题描述

在聚合物 3 组件中，我已经声明了一个对象属性：

 static get properties(): myInferface {
    return {
      myObject: {
        type: Object,notify: true,value:  {
          showMe: false,text: '',text2: ''
        }
      }
    };
  }

我用

 static get template() {
    return html`
          <template is="dom-if" if={{myObject.showMe}}>
           <p>{{myObject.text}}</p>
           <p>{{myObject.text2}}</p>
          </template>
    `;

我声明组件：

window.customElements.define('myComp',myClass);

不会显示任何内容，因为 myObject.showMe 默认值为 false。

我在另一个组件中导入组件并尝试添加属性：

<myComp> 
    myObject= {{
    showMe: true,text: "aaa",text2: "bbb"
              }}
</myComp>

不起作用。我也试过：

 <myComp> 
        myObject= {myObject {
        showMe: true,text2: "bbb"
                  }}
    </myComp>

不起作用。怎么了？

解决方法

您必须导入 @polymer/polymer/lib/elements/dom-if.js。

以下是包含您的代码片段的演示：https://stackblitz.com/edit/polymer-element-example-mxjhuu?file=index.js

顺便说一句。您应该更改组件的名称，因为 custom elements should be in kebab-case:

window.customElements.define('my-comp',myClass);