iron-list selected-item observer returns 在发送选定对象之前为空

Question

我正在尝试在 Iron List 上实现单个 selection。对于每次有效点击，我都会得到一个空值，紧接着是实际值。这是铁名单代码

<iron-list items="[[imagearray]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
  <template>
        <div class = "flexchild"style="width:50%"> 
      <iron-image  class = "imagecontainer" sizing = "cover" style = "width:calc(100% - 4px); height:180px;"
      src=[[item.linkwebp]]></iron-image>
       
    </div>
    </template>
</iron-list>

这是我的属性对象

          selectedItem:
          {
            type:Object,
            observer: '_itemSelected'
          }
          
        _itemSelected()
      {
         

         console.log(this.selectedItem);
         
*
      }

每次我 select 一个铁列表元素时，我都会得到 null 后跟实际元素。知道为什么

Answer 1

Seams 你的代码没有错误。可能会导致其他事情。下面的演示 link 效果很好。

DEMO

<html>
<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <link rel="import" href="polymer/polymer.html" >
  <link rel="import" href="iron-ajax/iron-ajax.html">
    <link rel="import" href="iron-list/iron-list.html">
    <link rel="import" href="iron-image/iron-image.html">  
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
 <body>
  
 <x-foo></x-foo> 
     
   
  <dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }

    </style>
    <!--In order to retrive some object data -->
    <iron-ajax 
          auto
          id="ajax"
          url="https://randomuser.me/api?results=10"
          last-response="{{response}}"> </iron-ajax>
    
 <iron-list items="[[response.results]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
  <template>
        <div class = "flexchild" style="width:50%"> 
      <iron-image   style ="width: 40px;height:40px; border-radius:30px;" src='[[item.picture.large]]'></iron-image> 
          <span>[[item.name.first]] [[item.name.last]]</span> 
       
    </div><br/>
    </template>
</iron-list>
 <pre>[[obj]]</pre>
</template>
    
<script>
    HTMLImports.whenReady(function() {
      
    class XFoo extends Polymer.Element {
      static get is() { return 'x-foo'; }
      static get properties() { return { 
       selectedItem: {
            type:Object,
            observer: '_itemSelected'
          }
     }}
 
    
      _itemSelected() {
         this.obj = JSON.stringify(this.selectedItem, null, 4);
         console.log(this.selectedItem);
      }

  }
customElements.define(XFoo.is, XFoo);
 });
    
</script>
    
</dom-module>
   
</body>
</html>

iron-list selected-item observer returns 在发送选定对象之前为空

iron-list selected-item observer returns null before sending selected object

polymer

polymer-2.x