如何遍歷聚合物中的一系列對象

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