使用Polymer 2.0的简单web组件：从下拉列表更新值不起作用

Question

我尝试使用Polymer 2.0实现一个非常基本的Web组件，用于学习目的。该组件应仅在select-element中显示h1-element的选定值。

<link rel="import" href="../bower_components/polymer/polymer-element.html">


<dom-module id="test-basis">
  <template>
    <style>

    </style>



    <container class="content__column">
      <h2>Test component</h2>

      <div class="table-select-line mono">
        <label class="form-field-label" for="test-key">Tabelle:
          <select class="form-field dropdown" id="tables">
            <option value="printer">My printer</option>
            <option value="color">My color</option>
          </select>
        </label>
      </div>

      <h1 id="abc">[[currentTable]]</h1>
    </container>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TestBasisData extends Polymer.Element {

      constructor() {
        super();
      }

      ready() {
        super.ready();
      }

      static get is() {
        return 'test-component';
      }

      connectedCallback() {
        super.connectedCallback();
        console.log("BasisData created...");
        //create shadow dom
        var shadow = this.shadowRoot;
        this._createTablesListener();
        this._loadData();
        this.currentTable = 'printer';
      }

      static get properties() {
        return {
          data: Object,
          selectedTable: {
            type: String,
            notify: true
          },
          currentTable:{
            type: String,
            notify: true
          }
        }
      }


      static get observers() {
        return [
            '_handleTableUpdate(currentTable)'
        ];
      }

      _createTablesListener(){
        let tables = this.shadowRoot.querySelector("#tables");
        tables.addEventListener("change", this._handleTableSelect);
      }

      _handleTableSelect(item) {
        console.log("item: " + item.target.value);
        this.currentTable = item.target.value;
      }

      _loadData(table = "printer") {
        let p = new Promise((resolve, reject) => {
          resolve(this._loadDataFromService());
        });
        p.then(json => {
          this.data = json;
        }).catch(e => console.log("Cannot load data from service.", e));
      }

      async _loadDataFromService() {
        let p = await fetch("../data.json");
        return await p.json();
      }
    }


    window.customElements.define(TestComponent.is, BasTestisData);
  </script>
</dom-module>

我能够在_handleTableSelect监听器中获取所选值，但是从那里：我不知道如何更新currentTable字段。

我不能使用this.querySelector("#abc")，因为在_handleTableSelect方法中：this仅指select元素。我也试过观察者，但他们从未被召唤过。

所以我在某种程度上坚持如何将这些目标联系在一起。

PS：我试过工作，例如通过聚合物铁页，了解如何做到这一点，但这更令人困惑;因为他们使用例如this.items在整个代码中无处创建，分配或定义。但这可能是另一个问题。