聚合物纸下拉菜单初始选择未显示在标签中

Question

使用以下代码，我希望 "Option 1" 在页面加载时显示。而是显示 "Label Here"。单击下拉菜单时，选项 1 以粗体显示，表示它已被选中。如果我点击选项 1，标签就会更新并且是正确的

<paper-dropdown-menu label="Label Here" selected="0">
<paper-menu class="dropdown-content" selected="0">
<paper-item >Option 1</paper-item>
<paper-item >Option 2</paper-item>
</paper-menu>
</paper-dropdown-menu>

这是使用来自 Github

的最新组件

  "dependencies": {
    "polymer": "1.0.8",
    "iron-elements": "1.0.3",
    "paper-elements": "PolymerElements/paper-elements#1.0.3",
    "page": "1.6.3",
    "adal-angular": "1.0.4",
    "moment": "2.10.6",
    "jaydata": "1.3.6",
    "bootstrap": "3.3.5",
    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#1.0.1"

  }

这是一个错误还是我做错了什么？

谢谢！

丹尼尔

Answer 1

所选属性适用于 paper-menu，不适用于 paper-dropdown-menu。但是后者的 selectedItemLabel 是计算出来的，selectedItem 是只读的。我发现预加载所选项目的唯一方法是触发 'iron-activate' 事件，但不确定它是否最佳。

<dom-module id="my-test">
    <template>
        <paper-dropdown-menu id="dropdownMenu" label="Label Here" >
            <paper-menu id="menu" class="dropdown-content" selected="0">
                <paper-item id="option1">Option 1</paper-item>
                <paper-item id="option2">Option 2</paper-item>
            </paper-menu>
        </paper-dropdown-menu>
    </template>
    <script>
        Polymer({
            is: 'my-test',
            ready: function(){


                this.$.menu.dispatchEvent(new CustomEvent('iron-activate', {
                    bubbles: true,
                    cancelable: true,
                    detail: {
                        item:this.$.option2,
                        selected:1
                    }
                }));
            }
        });
    </script>
</dom-module>

Answer 2

只是更新一下，这是一个已知错误，并非预期行为，即使上述解决方法可能有效：

https://github.com/PolymerElements/paper-dropdown-menu/issues/3

希望问题尽快解决！

聚合物纸下拉菜单初始选择未显示在标签中

Polymer paper-dropdown-menu initialy selected not displayed in label

polymer

polymer-1.0