Question

我在将HTML元素放入函数中的dom-repeat中时遇到问题。

起初我有这段代码，它可以正常工作。

HTML：

<div class="card">
  <app-toolbar>
    <paper-button on-click="downloadTable">[[localize('Download')]]</paper-button>
  </app-toolbar>
  <table id="table" noshadow>
  <!--Table content here-->
  </table>
</div>

JS：

downloadTable() {
    this.tableToExcel(this.$.table, 'table.xls');
}

但是后来我从一个表转到了多个dom-repeat迭代的表。

HTML：

<template id="tablesRoot" is="dom-repeat" items="[[tables]]" as="table">
    <div class="card">
      <app-toolbar>
        <paper-button on-click="downloadTable">[[localize('Download')]]</paper-button>
      </app-toolbar>
      <table id={{table.elId}} noshadow>
      <!--elId is a string: table0, table1, table2, ... Table content here-->
      </table>
    </div>
</template>

JS：

downloadTable() {
    this.tableToExcel(this.$.table0, 'table.xls');
    //Trying to get the first table. Also tried without success:
    //this.$.tablesRoot.table0
    //this.$.tablesRoot.$.table0
}

似乎在元素检查器中，为table和dom-repeat都正确添加了id。但是仍然无法访问任何table。我该怎么做？

Answer 1

看来，您无法解决像这样动态创建的元素。相反，您必须使用：

Polymer.dom(this.root).querySelector('#table0')

Answer 2

您也可以致电

this.$$('#table0')

这是Polymer.dom(this.root).querySelector('#table0')的简写，如here所示。

在Polymer 2中无法通过id获取元素

2 个答案: