javascript - 无法通过 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');
}

但后来我从一个表变成了多个表，这些表使用 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。但仍然无法访问任何表。我需要怎么做？

Answer 1

看来，您不能像这样处理动态创建的元素。相反，您必须使用:

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