Polymer 聚合铁列表显示不正确 铁名单{ 高度：500px； } 列表 名称：[[item.Name]] 聚合物({ 是：“页面列表”， 附：函数（）{ 这是数据=[ { 索引：0， 姓名：“利兹·格里姆斯” }, { 索引：1， 姓名：“弗雷泽·拉拉” }, { 索引：2， 姓名：“多拉·格里菲斯” }]; 此.$.list.fire（'resize'）； }, 行为：[ 聚合物.纳米二氧化钛性能 ], 属性：{ 数据：{ 类型：数组， 通知：正确 } }, _onOK：函数（e）{ 此.$.pages.selected=“1”； } });

按下“列表”按钮后，预计铁列表将全部显示。不幸的是，结果是显示一行“Name:”而没有其他内容。如果我强制将所选页面设置为“1”，这意味着在浏览器的第一次重新刷新时，将显示带有熨斗列表的页面，显示是正确的：三行显示正确的数据

这个问题似乎与这样一个事实有关：在启动时，带有铁清单的页面尚未显示

有人知道怎么解决这个问题吗？

我想你需要

<dom-module id="page-list">
<style include="shared-styles"></style>
<style>
 iron-list {
  height: 500px;      
}  
</style>
<template>
    <neon-animated-pages id="pages" selected="0">
        <neon-animatable><paper-button id="list-button" raised on-tap="_onOK" >List</paper-button></neon-animatable> 
        <neon-animatable>
          <iron-list id="list" items="[[data]]" as="item">
              <template>
                    <div>
                        Name: <span>[[item.name]]</span>
                    </div>
              </template>
          </iron-list>   
        </neon-animatable>
    </neon-animated-pages>                     
</template>
<script>
    Polymer({
        is: "page-list",
        attached: function () {
            this.data=[
                    {
                        index: 0,
                        name: "Liz Grimes"
                    },
                    {
                        index: 1,
                        name: "Frazier Lara"
                    },
                    {
                        index: 2,
                        name: "Dora Griffith"
                    }];
                    this.$.list.fire('resize');
        },
        behaviors: [
            Polymer.NeonAnimatableBehavior
        ],
        properties: {                
            data: {
                type: Array,
                notify: true
            }
        },
        _onOK: function (e) {
            this.$.pages.selected="1";
        }
    });
</script>

而不是

          this.set('data', [...]);

---

对于Polymer来说，获得数据更改通知似乎是一个已知的问题

---

请在github上查看我建议的解决方案。

以下解决方案只是一个破解，但是如果您在

neon animatable

上收听

iron resize

事件，然后调用

notifyResize（）

在任何子元素

铁皮列表

上，您都应该能够绕过此问题，直到可以对

进行更可持续的修复。如果您将

霓虹灯动画页面

替换为

铁皮页面

，问题就会消失。我们在

铁皮调整

处理程序中的

铁皮列表

中添加了日志。在更改页面时，如果是

iron页面

，则会调用该处理程序，如果是

neon动画页面

，则不会调用该处理程序。我们还将iron resize=“handler”上的

添加到
霓虹灯动画页面
，并且在更改页面时调用该处理程序。似乎触发了
iron resize
事件，但
iron list
未接收到该事件。我在Dart中重建了您的示例（我没有将Polymer与JS一起使用），它运行良好（在我的答案中进行了更改）。起初，我只看到字符串
Name:
，过了一会儿，列表中就出现了这些名称。Dart中的Polymer仅包装Polymer.js，因此应该是相同的。使用的聚合物和元素版本通常有点落后。这似乎是一个错误。。。由于
neon动画页面中的这段代码，
iron resize
不会通知所有元素：
this.resizerShouldNotify=function（element）{return element==selectedPage；}
。
iron resize
仅通知页面，而不通知页面内的元素。真奇怪。。。
          this.data=[...];