Javascript 聚合物中的JS可变结合

我想用聚合物做一些数据绑定。我定义了一个自定义元素：

<dom-module id="my-voltage">
  <template is="auto-binding">
    <div class="circle">{{volts}}</div>
  </template>
  <script>
    class MyVoltage extends Polymer.Element {
      static get is() {
        return "my-voltage";
      }
      static get properties() {
  return {
    volts: {
      type: String
    },
  }
}
      constructor() {
        super();
      }
    }
    customElements.define(MyVoltage.is, MyVoltage);
  </script>
</dom-module>

我想要

volts

来显示

电压的值。我正在尝试
document.getElementById（“volt”）.setAttribute（“volts”，voltage），但我在属性赋值处不断得到“UncaughtTypeError:无法读取null的属性'setAttribute'。在聚合物中，正确的方法是什么

我确实有html中的元素：

  <my-voltage id="volt" class="circle" volts="-1"></my-voltage>

我看到您使用的是Polymer 2.0+。我只使用了以前的版本

总之，您想将数据分配给子元素吗？这里的问题是，在“ready”方法期间，无法保证子元素已加载。如果您想做一些更高级的事情，比如做表单验证，那么必须创建一个循环的间隔，直到子元素实际存在

var voltElement = {};

var intervalId = setInterval((function() {
  voltElement = this.$.volt;

  if (voltElement) {
    //enter code here
    clearInterval(intervalId);
  }
}).bind(this));

.bind（this）仅用于在setInterval中的匿名函数中使用正确的作用域

然而，这个问题对你来说并不复杂。相反，您可以创建一个属性变量，并在创建时将其指定给my voltage元素中的voltage属性

<my-voltage id="volt" class="circle" volts="[[voltage]]"></my-voltage>

使用this.set（）可以使Polymer向使用该变量的元素发送事件，前提是该变量事先已设置为启用状态，例如已给定默认值。
在Polymer的组件中，您应该使用本机Polymer运算符。
所以，下一个js代码应该通过polymer的操作符重写

document.getElementById("volt").setAttribute("volts", voltage);

在聚合物1.9.1中，这条线将有下一个视图：

this.$.volt.set("volts", voltage);

或

在Polymer 2.0或3.0中，可以使用以下语法：

this.shadowRoot.querySelector('#volt').set("volts", voltage);

有关Polymer 1.9.1中节点查找的更多信息，您可以在那里找到：

更多关于this.shadowRoot.querySelector的示例，您可以在此处找到：

this.$.volt.set("volts", voltage);

this.$$('#volt').set("volts", voltage);

this.shadowRoot.querySelector('#volt').set("volts", voltage);