地图列表中的地图

Question

经过多次尝试和错误，我不知道如何处理 Dart 中的嵌入式列表和映射，以及如何通过 Polymer 数据绑定访问它们。目标是读取 JSON 文件并构建可以过滤和排序的 HTML 表。 （为了清楚起见，我只是在下面对地图数据进行了硬编码。）

我可以在我的 Polymer 元素中构建一个 HTML 表格（请参阅 buildTable），只要 Map 看起来像下面 Dart 代码中看到的 testMap3 并且它可以很好地呈现：

HTML：

<p><b>The data from testMap3 after building table in Dart file:</b>/p> 
<table class="bordered" id="dataTable"></table>     

但是，我似乎无法弄清楚如何通过 Polymer 数据绑定来做到这一点。现在我只是转储 k-v 对，以便我可以看到对象：

HTML：

<p><b>The data from testMap3 via Polymer binding:</b></p> 
<template repeat="{{key in testMap.keys}}">
  <p>{{key}} : {{testMap[key]}}</p>   
</template>

如何使用数据绑定来创建与上面第一个示例的结果匹配的表？为了让事情变得更加困难，我该如何使用 testMap2 来代替？

飞镖：

调用 buildTable 时渲染 testMap3 工作正常：

Map testMap3 = toObservable({
                'columns' : ["First Name", "Attending", "Phone"],
                'rows' : [{'First Name' : "Alice", 
                           'Attending' : "Yes",
                           'Phone' : "555-1212"},                              
                          {'First Name' : "Bob", 
                           'Attending' : "Yes",
                           'Phone' : "555-2323"}                              
                         ]
           });

由于附加的嵌入式“电话”值是包含另一个地图的列表，因此通过 testMap2 进行迭代一直存在问题：

 Map testMap2 = toObservable({
               'columns' : ["First Name", "Attending", "Phone"],
               'rows' : [{'First Name' : "Alice", 
                          'Attending' : "Yes",
                          'Phone' : [{'Home' : "555-1234",
                                      'Work' : "555-4321",
                                      'Mobile' : "555-1212"}]},                              
                         {'First Name' : "Bob", 
                          'Attending' : "Yes",
                          'Phone' : [{'Home' : "555-2345",
                                      'Work' : "555-5432",
                                      'Mobile' : "555-2323"}]}                            
                        ]
          });

以下代码适用于 testMap3，但如果我使用 testMap2，我没有尝试过让我循环通过电话数据。 关于如何做到这一点的任何想法？

buildTable() {

  TableElement table = this.shadowRoot.querySelector("#dataTable");
  table.children.clear();

  TableSectionElement tBody = table.createTBody();

  TableSectionElement tHead = table.createTHead();
  TableRowElement trh = tHead.addRow();

  for (var column in testMap3["columns"]) {
    var cell = new Element.tag('th');
    cell.text = column;
    trh.append(cell);
  }

  for (var row in testMap3["rows"]) {

    TableRowElement tr = tBody.addRow();
    for (var column in testMap3["columns"]) {
      tr.addCell().text = row[column];       
    }
  }   
}

最后，最终目标之一是采用类似于以下的方法过滤呈现表中的所有列...这可行吗？我似乎无法在列表中找到使用地图甚至列表的示例。

HTML：

<template repeat="{{city in listOfCities | filter(searchParameter)}}">
  <li>{{city}}</li>
</template>

飞镖：

@observable List listOfCities = ["Chicago", "New York", "Los Angeles", "Dallas", "Denver"];

filter(term) => (listOfCities) => term.isEmpty ? listOfCities : listOfCities.where((item) => item.toLowerCase().contains(searchParameter.toLowerCase())).toList();

非常感谢任何指导，因为我已经苦苦挣扎了一个多星期，并且正准备放弃。

谢谢！

Answer 1

以下 Polymer 数据绑定适用于 testMap3：

<table>
  <thead>
    <tr>
      <td template repeat="{{column in testMap3['columns']}}">{{column}}</td>
    </tr>
  </thead>
  <tbody>
    <tr template repeat="{{row in testMap3['rows']}}">
      <td template repeat="{{data in row.keys}}">{{row[data]}}</td>
    </tr>
  </tbody>
</table>

对表格行的过滤可以通过以下方法完成：

filter(term) => (rows) => term.isEmpty
      ? rows
      : rows.where((row) => row.values.any((val) => val.toLowerCase().contains(term)));

它会查看整个行数据并将每一列与搜索词进行匹配。

tbody 将如下所示：

<tbody>
  <tr template repeat="{{row in testMap3['rows'] | filter(search)}}">
    <td template repeat="{{data in row.keys}}">{{row[data]}}</td>
  </tr>
</tbody>

它假设您有一个文本输入，该输入连接到一个名为 search 的字符串值。

Answer 2

你可以试试这个

<table>
  <thead>
    <tr>
      <th template repeat="{{item in testMap3['columns']}}">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr template repeat="{{row in testMap3['rows']}}">
      <td template repeat="{{key in testMap3['columns']}}">{{row[key]}}</td>
    </tr>
  </tbody>
</table>

<tr template repeat="...">

与

相同

<template repeat="...">

但是你不能在表格中使用

<tr template repeat="...">

抱歉，我不知道为什么必须这样做，您必须对此进行自己的研究。如果你尝试使用它会抛出一个错误

<table>
    <template repeat="...">
        <tr><td></td></tr>
    </template>
</table>

至于过滤

你可以这样做

@observable String search = '';

filter(search) => (List row) =>
    row.where((item) => item['Phone'].contains(search));

用于基于手机的过滤

或过滤任何与搜索字符串匹配的值

filter(String search) => (List row) =>
    row.where((Map item) => item.values.any((val) => val.toLowerCase().contains(search.toLowerCase())));

这类似于@pixel-elephant 的另一个答案