如何遍历聚合物中的一系列对象

Question

因此，环顾四周并测试事物，我可以轻松地遍历数组或列表。

<template is="dom-repeat" items="{{inputs}}">
    <paper-input label={{item}} id={{item}} style="width:5em"></paper-   input>
</template>

但是，我在遍历一系列对象时遇到了问题。

<iron-data-table id="outputtable" items="{{output}}">
        <template is="dom-repeat" items="[[output]]">
                <data-table-column name="[[item.key]]">
                    <template>[[item.value]]</template>
                </data-table-column>
        </template>
</iron-data-table>

否则此代码可能不正确，但我无法克服错误

Polymer :: Attributes：无法将数组解码为JSON

我遍历字符串数组的第一个示例，我实际上想遍历对象数组，但未能做到这一点。

[{"uri":"/emoji/1"},{"uri":"/emoji/2"}]

我的对象数组的简单示例。

<iron-ajax id="ajaxPost" url={{url}} handle-as="json" content-type="application/json" method="POST" on-response=clearAndOutput > </iron-ajax>


this.output [Object { uri="/emoji/1"}, Object { uri="/emoji/2"}, Object { uri="/emoji/3"}, 35 more...] 

clearAndOutput: function(data) {
    this.returnvalue = data.detail.response;
}

Answer 1

在dom-repeat ， items数组中的每个array元素都可以通过转发器模板中的item访问（尽管您可以选择其他迭代器名称）。 如果名为"output"的数组包含"uri"属性，则可以在模板中迭代该数组，如下所示：

<template is="dom-repeat" items="[[output]]">
  <div>[[item.uri]]</div>
</template>

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', properties: { output: { type: Array, value: () => [{"uri":"/emoji/1"},{"uri":"/emoji/2"}] } } }); });

 <head> <base href="https://polygit.org/polymer+1.7.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <template is="dom-repeat" items="[[output]]"> <div>[[item.uri]]</div> </template> </template> </dom-module> </body>

码笔

您看到的错误表明"output"实际上不是数组，因此您必须对其进行调试（或提供有关其设置的其他信息，以帮助进行故障排除）。

如何遍历聚合物中的一系列对象

问题描述

1 个解决方案

解决方案1
0 2016-11-01 12:08:25

如何遍历聚合物中的一系列对象

问题描述

1 个解决方案

解决方案1 0 2016-11-01 12:08:25

解决方案1
0 2016-11-01 12:08:25