将JSON键值对绑定到聚合物dart中的表模板

Question

如何用聚合符表示法绑定json对象中的键/值对。我有模板repeat =“{{jsonarray中的对象}}”......我想布置一张桌子。说每个对象都有{1：one，2：two，3：three}

类似的东西：

<template repeat="{{item in mylist}}">
  <tr>
     <template repeat="{{key, value in item}}">
        <td>{{key}}: {{value}}</td>
     </template>
  </tr>
</template>

Answer 1

此代码适用于我：

<强>落镖：

@observable List jsonlist = toObservable(JSON.decode('[{"1":"one"},{"2":"two"}]'));

<强> HTML：

<template repeat="{{ foo in jsonlist }}">
  {{ foo }}
  <template repeat="{{ key in foo.keys }}">
    {{ key }} = {{ foo[key] }}
  </template>
</template>

使用此代码，我得到以下输出：

  

{1：one} 1 =一个{2：2} 2 = 2

此致 罗伯特

Answer 2

我认为应该这样：

<template repeat="{{item in mylist}}">
  <tr>
     <template repeat="{{key in item.keys}}">
        <td>{{key}}: {{item[key]}}</td>
     </template>
  </tr>
</template>

如果它不起作用，请尝试添加评论（因此我收到通知）然后我构建了一个演示应用并自己尝试。

Answer 3

我设法以我想要的方式工作，即将JSON对象的JSON数组输出到表中，如下所示：

jsontable.dart

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:convert';

@CustomTag('json-table')
class jsontable extends PolymerElement {

   @observable List jsonarray = [{"id":1,"description":"cat"},{"id":2,"description":"dog"}, {"id":3,"description":"fairy"}];

   jsontable.created() : super.created() {}
}

jsontable.html

<polymer-element name="json-table">
  <template>
    <div>
      <table border="1">
        <tbody>
          <thead>
            <tr>
              <template repeat="{{ key in jsonarray.first.keys }}">
                <th>{{key}}</th>
              </template>
            </tr>
          </thead>
          <template repeat="{{ jsonobject in jsonarray }}">
            <tr>
                <template repeat="{{ value in jsonobject.values }}">
                  <td>{{value}}</td>
                </template>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </template>
  <script type="application/dart;component=1" src="jsontable.dart"></script>
</polymer-element>