Question

所以环顾四周并测试一些东西，我可以很容易地遍历数组或列表。

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

但是我在迭代一系列obects时遇到了问题。

<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：无法将Array解释为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数组的每个数组元素都可以在转发器模板中由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>

codepen

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

如何遍历聚合物

1 个答案: