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

Question

我在函数中获取 dom-repeat 内的 HTML 元素时遇到问题。

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

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');
}

但后来我从单个 table 变成了多个 table，它们用 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') 的 shorthand，如图 here。

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

Cannot get element by id in Polymer 2

html

javascript

getelementbyid

polymer

polymer-2.x