Polymer 2.0の単純なwebcomponent：ドロップダウンからの値の更新が機能しない

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：私はうまくいった。これがどのように行われているのかを調べるためにPolymer iron-pagesを通して、それはさらに混乱します。例えば、 this.itemsはコード全体で作成、割り当て、定義されていません。しかしそれは恐らく別の質問です。

Answer 1

は値= "{{currentTable ::入力}}"

元を入れてみてください。

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