javascript - 聚合物2 : paper-dropdown-menu selection event not firing

Question

我使用具有延迟加载功能的聚合物 2 入门套件创建了该应用程序。

我有一个paper-dropdown-menu，其中包含一个项目列表。此列表使用通过 iron-ajax 元素检索的数据。

通过iron-ajax返回的数据如下所示: [“应用程序 1”、“应用程序 2”、“应用程序 3”]

列表填充正确，但是当我单击该列表中的其中一项时，元素本身的选择似乎没有改变。

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">

<link rel="import" href="shared-styles.html">

<dom-module id="my-kc">
  <template>
        <style include="shared-styles">
            :host {
                display: block;
                padding: 10px;
            }

            ul {
                list-style: none;
                padding-left: 0;
            }
        </style>

        <iron-ajax id="dbQueryIA"
                   auto
                   url="SOME URL HERE"
                   content-type="application/x-www-form-urlencoded"
                   method="POST"
                   body="[[params]]"
                   on-response="handleResponse"
                   last-response="{{response}}"
                   on-error="_confirmError">
        </iron-ajax>

        <div class="card">
          <p>Application: [[application]]</p>
          <p>Selected Item: [[selectedItem]]</p>
          <p>Selected Value: [[selectedValue]]</p>
            <paper-dropdown-menu id="applications" label="Application" placeholder="Select An Application" selected-item="[[selected]]" value="[[selectedValue]]">
              <paper-listbox slot="dropdown-content" selected="{{application}}">
                <template is="dom-repeat" items="[[response]]">
                  <paper-item value="[[item]]">[[item]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
        </div>
    </template>

  <script>
    class MyKc extends Polymer.Element {
      static get is() { return 'my-kc'; }
      static get properties() {
        return {
          params: {
            type  : Object,
                    value : {
              // table: 'EAMS',
              // category: 'Admin',
              // tool: 'EAMS',
              tools: true
              //sub_category: 'Access',
              // issue: 'Account Register'
                    }
          },
          body       : Object,
          response   : Object,
          selections : {
            type: Object,
            value: function() { return {}; }
          },
          application: {
            type: String,
            value: "1"
          },
          selectedItem: {
            type: String,
            value: ""
          },
          selectedValue: {
            type: String,
            value: ""
          },
        };
      }

      static get observers() {
        return [
          '_selectionChanged(selections.*)'
        ];
      }

      _appChanged( data ) {
        debugger;
      }

      handleResponse( res ) {
        this.response = this.response.sort();
        }

        _confirmError( err ) {
            console.error( err );
        }

      _selectionChanged( selection ) {
        let value;

        if ( selection === 'application') {
          value = this.selections.application ? selection.application : 'Select an application';
        }
        console.log(value);
        return value;
      }
    }

    window.customElements.define(MyKc.is, MyKc);
  </script>
</dom-module>

Answer 1

缺少<link rel="import" href="../bower_components/paper-lisbox/paper-listbox.html">导入:)

http://plnkr.co/edit/QZPBbYZTROOBv1a4kftV?p=preview