Polymer 在另一个窗口中选择值时显示纸张下拉菜单

仅当在另一个

纸张下拉菜单中选择了特定值时，我才尝试显示
纸张下拉菜单

我正在使用名为
selectedValue
的属性将所选值绑定到
dom if
模板中的
if
属性

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">

<dom-module id="my-element">
    <template>
        <paper-dropdown-menu label="One" no-animations>
            <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selectedValue}}">
                <template is="dom-repeat" items="[[options1]]">
                    <paper-item>[[item]]</paper-item>
                </template>
            </paper-listbox>
        </paper-dropdown-menu>

        <template is="dom-if" if="[[_view()]]">
            <paper-dropdown-menu label="Two" no-animations>
                <paper-listbox slot="dropdown-content" class="dropdown-content">
                    <template is="dom-repeat" items="[[options2]]">
                        <paper-item>[[item]]</paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </template>
    </template>

    <script>
        /**
        * @customElement
        * @polymer
        */
        class MyElement extends Polymer.Element {
            static get is() { return 'my-element'; }

            static get properties() {
                return {
                    selectedValue : {
                        type : String
                    },
                    options1 : {
                        type: Array,
                        value: [1,2,3,4]
                    },
                    options2 : {
                        type: Array,
                        value : [5,6,7]
                    }
                };
            }

            _view() {
                return this.selectedValue === "1";
            }
        }

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


[[项目]]
[[项目]]
/**
*@customElement
*@聚合物
*/
类MyElement扩展了Polymer.Element{
静态get是（）{return'my element'；}
静态获取属性（）{
返回{
selectedValue：{
类型：字符串
},
选项1：{
类型：数组，
值：[1,2,3,4]
},
选项2：{
类型：数组，
价值：[5,6,7]
}
};
}
_视图（）{
返回此值。selectedValue==“1”；
}
}
window.customElements.define（MyElement.is，MyElement）；

问题是第二个
纸张下拉菜单
从未显示。
问题是您的计算绑定没有依赖项，因此它在初始化时被调用一次。由于
selectedValue
最初是
undefined
，
\u view（）
返回
false
，导致
dom if
隐藏其内容

要使计算出的绑定重新计算
selectedValue
，请确保将变量指定为绑定的参数：

<template is="dom-if" if="[[_view(selectedValue)]]">...</template>

我建议将文本从
字符串
切换为
数字
：

selectedValue === 1

因此，
\u视图
函数应该如下所示：

_view(selectedValue) {
  return selectedValue === 1;
}

太棒了，你说得对！但是，有一个问题：在您的演示中，当我选择第二个选项（
2
）时，会显示第二个菜单，当我选择第一个选项（
1
）时，会显示第二个菜单。问题是
selectedValue
保存的是选定的索引，而不是选定的值。为什么？文档表明默认情况下，
.selected
是所选项目的索引。为了使用项目的值，您必须将项目的属性设置为所需的值，然后在
.attrForSelected
中指定属性的名称。
_view(selectedValue) {
  return selectedValue === 1;
}