html的

    <paper-dropdown-menu
              label = "Country *"
              selected-item-label = "{{countrySelectedItemLabel}}"
              error-message = "Country is required"
              id = "countryDdm">
            <paper-menu class = "dropdown-content">
              <template
                  is = "dom-repeat"
                  items = "[[countries]]"
                  as = "country">
                <div>[[country.name]]</div>
                <br>
              </template>
            </paper-menu>
          </paper-dropdown-menu>

          <div class = "layout horizontal">
            <paper-dropdown-menu
                hidden = $"[[hideState]]"
                label = "State *"
                selected-item-label = "{{stateSelectedItemLabel}}"
                id = "stateDdm">
              <paper-menu class = "dropdown-content">
                <template
                    is = "dom-repeat"
                    items = "[[states]]"
                    as = "state">
                  <div>[[state.name]]</div>
                  <br>
                </template>
              </paper-menu>
            </paper-dropdown-menu>

相关的.dart代码如下所示

##.dart


 @property
 bool hideState;


 @property
  String countrySelectedItemLabel = '';

@Listen( 'countryDdm.tap' )
  void toggleStateOnUSASelection( event, [_] ) {

    switch ( countrySelectedItemLabel ) {
       case 'United States of America':

        switch ( hideState ) {
          case true:
            hideState = false;
            break;

          case false:
            break;
        }
        break;
    }
  }

  void ready( ) {
    set('hideState', true);
  }

应用程序正常显示但是当我选择“美利坚合众国”时，状态组合未显示。如果选择了除美国以外的任何国家，我还想隐藏州组合。

感谢任何帮助。感谢。

Answer 1

$位置错误

  hidden$="[[hideState]]"

实际的hidden属性由Polymer设置。这是为了解决href元素<img>等属性的问题，其中绑定表达式（不是图像的实际URI的字符串）会在Polymer甚至有机会之前产生错误消息解决绑定表达式。

还有一些问题（请参阅代码中的注释）

<强>镖

@HtmlImport('app_element.html')
library so33931432_hide_paper_dropdown.web.app_element;

import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/paper_dropdown_menu.dart';
import 'package:polymer_elements/paper_menu.dart';

/// [PaperDropdownMenu], [PaperMenu]
@PolymerRegister('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  @property
  List<String> countries = ['Austria', 'Belgium', 'Czech Republic', 'United States of America'];
  @property
  bool hideState; // = true; // you could set a default value, then you don't need ready

  // This way usually works better for me than @Listen
  @Property(observer: 'toggleStateOnUSASelection')
  String countrySelectedItemLabel = '';

  // If `@Property(observer: ...) is used the function signature 
  // has to be changed
  @reflectable
  void toggleStateOnUSASelection(String label, [_]) {
    switch (countrySelectedItemLabel) {
      // I wasn't sure what you actually tried to accomplish here
      // but this worked for me to reproduce your problem
      case 'United States of America':
        set('hideState', false);
        break;
      default:
        set('hideState', true);
    }
  }

  void ready() {
    set('hideState', true);
  }
}

<强> HTML

<!DOCTYPE html>
<dom-module id='app-element'>
  <template>
    <paper-dropdown-menu
        label="Country *"
        selected-item-label="{{countrySelectedItemLabel}}"
        error-message="Country is required"
        id="countryDdm">
      <paper-menu class="dropdown-content">
        <template
            is="dom-repeat"
            items="[[countries]]"
            as="country">
          <div label="[[country]]">[[country]]</div>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItem:<span>[[countrySelectedItemLabel]]</span> value: <span>[[countrySelectedItemLabel]]</span></div>
    <div>hideState: <span>[[hideState]]</span></div>
    <div class="layout horizontal">
      <paper-dropdown-menu
          hidden$="[[hideState]]"
          label="State *"
          selected-item-label="{{stateSelectedItemLabel}}"
          id="stateDdm">
        <paper-menu class="dropdown-content">
          <template
              is="dom-repeat"
              items="[[states]]"
              as="state">
            <div>[[state.name]]</div>
            <br>
          </template>
        </paper-menu>
      </paper-dropdown-menu>
    </div> <!-- missing in your question -->
  </template>
</dom-module>

在dart-polymer 1.x中设置隐藏属性

html的

1 个答案: