嵌套dom-repeat不显示任何内容

Question

我正在尝试做一个嵌套的dom-repeat，我没有任何错误，但我仍然有一个空的显示。检查元素，我可以看到数据实际上在那里，而且页面在空白之前显示了很短的时间。下面是代码的摘录：

     <iron-ajax auto url="http://localhost:8808/datal2" handle-as="json" last-response="{{top}}"></iron-ajax>

     <template is="dom-repeat" items="{{top.top}}" as="item">
       <div>
         <span id="l4-support-offering-[[index]]">{{item.l2}}</span>
       </div>


       <iron-ajax auto url="[[computeCompleteUrl(item.l2)]]" handle-as="json" last-response="{{top}}"></iron-ajax>

        <template is="dom-repeat" items="{{top.top}}" as="level24" index-as="indexl24">
          <div>
            <span id="l4-support-offering-l4[[indexl24]]">{{level24.l4}}</span>
          </div>
        </template>
     </template>

    <script>

    ........
      properties: {
    top: {
      type: Array,
      value: function() { return []; }
    },
    level24: {
      type: Array,
      value: function() { return []; }
    },
    ................

聚合物版本为1.8.0

我更改了代码：

 <p>
  Hello!
</p>
<iron-ajax auto url="http://localhost:8808/datal2" handle-as="json" last-response="{{lev2}}"></iron-ajax>


     <template is="dom-repeat" items="{{lev2.top}}" as="iteml2">
         <span id="l4-support-offering-[[index]]">{{iteml2.l2}}</span><br>

     <iron-ajax auto url="[[computeCompleteUrl(iteml2.l2)]]" handle-as="json" last-response="{{lev4}}"></iron-ajax>
            <template is="dom-repeat" items="{{lev4.l4byl2}}" as="level4" index-as="indexl24">
                <span id="l4-support-offering-l4[[indexl24]]">{{level4.l4}}</span>

            </template><br>


</template>
 <script>
Polymer({
  is: 'game',

  properties: {
    lev2: {
      type: Array,
      value: function() { return []; }
    },
    lev4: {
      type: Array,
      value: function() { return []; }
    }
  },

  computeCompleteUrl: function(level) {
    return 'http://localhost:8808/datal4byl2/' + level;
    console.log("manager is:" +level);
  },

​

现在我显示了一些东西，但它不正确。我有像这样的东西

X 1,2,3,4 Y 1,2,3,4 Z 1,2,3,4

虽然它应该是(这只是一个例子)

X 8,2,4 Y 6,8,5,2 Z 1,2,3,4

因此，它总是用第一个列表中最后一个元素的数据填充。

Answer 1

您引用的是top.top，但此变量不存在。您的top属性的类型为Array，因此不能执行top.top。首先，你必须迭代top属性，然后在嵌套的dom-repeat - item.top中(也许你只是错误地复制了你的代码)

Answer 2

最后，在我将第二个dom-repeat改为：

 <template is="dom-repeat" items="{{getLevelFours(item.l2)}}"  as="level24" index-as="indexl24">

以及使用的函数：

 computeCompleteUrl: function(level) {
     return 'http://localhost:8808/datal4byl2/' + level;
  },
 getLevelFours: function(level) {
     let theUrl = this.computeCompleteUrl(level);
     // http request based on url
     var xmlHttp = new XMLHttpRequest();
     xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
     xmlHttp.send( null );
     var myjson = JSON.parse(xmlHttp.responseText)
     return myjson.l4byl2;