聚合物纸.下拉菜单.标签中未显示的菜单

Question

使用下面的代码，我希望“选项1”显示在页面加载上。相反，将显示“这里的标签”。当单击下拉选项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

所选属性适用于纸质菜单，而不是纸张下拉菜单。但是后者的selectedItemLabel是计算出来的，selectedItem是readOnly。我发现预加载所选项目的唯一方法是触发‘’事件，但不确定它是否最佳。

<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

希望这个问题很快就能解决！