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

Question

出于学习目的，我尝试使用 Polymer 2.0 实现一个非常基本的 Web 组件。此组件应仅在 h1-element.

中显示 select-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：我试着工作，例如通过 Polymer iron-pages，了解这是如何完成的，但这更令人困惑；因为他们使用例如this.items 在整个代码中没有创建、分配或定义。但这可能是另一个问题。

Answer 1

尝试输入 value="{{currentTable::input}}"

例如

<select class="form-field dropdown" id="tables" 
value="{{currentTable::input}}">

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

Simple webcomponent with Polymer 2.0: Updating values from dropdown not working

javascript

polymer