在 Dart 中使用 @ngFor 访问地图的键和值

Question

我不知道这是否可能，但我一直在搜索，但没有看到任何与使用 *ngFor 访问地图键相关的信息。

给定：

.dart

 Map people = [
    { name: 'Anderson', age: 35, city: 'Sao Paulo' },
    { name: 'John', age: 12, city: 'Miami' },
    { name: 'Peter', age: 22, city: 'New York' }
  ];

.html

<table class="ui celled table">
  <thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  </thead>
  <tr *ngFor="#p of people">
    <td>{{<!--place the value of the maps key here-->}}</d>
    <td>{{ p.name }}</td>
    <td>{{ p.age }}</td>
    <td>{{ p.city }}</td>
  </tr>
</table>

是否可以将key的字符串值放在指定的位置？

谢谢

EDIT1 - 澄清

在 dart 中，可以使用如下所示的 for 循环来访问映射的键和值

map.forEach((k, v)
 {
   print('key|$k, value|$v');
 });

*ngFor 是否提供任何此类机制？

Answer 1

代替

<td>{{<!--place the value of the maps key here-->}}</d>

使用

<td>{{p.keys}}</td>

重新创建您的示例 Dart 循环更加费力，因为 p.keys 为每个调用返回一个新的迭代。这会在开发模式下产生错误消息

例外：表达式“AppElement@3:12 中的 p.keys”在检查后发生了变化。

为了解决这个问题，我创建了一个管道来记住以前的可迭代键

import 'package:angular2/core.dart'
    show Component, View, Pipe, PipeTransform;
import 'package:collection/collection.dart';

@Component(selector: 'app-element', pipes: const [MapKeysPipe],
template: '''
<h1>app-element</h1>
<table>
<tr *ngFor="let p of people">
  <td><span *ngFor="let k of p | mapKeys">{{'key|' + k + ', value|' + p[k].toString()}}</span></td>
  <td>{{ p['name'] }}</td>
  <td>{{ p['age'] }}</td>
  <td>{{ p['city'] }}</td>
</tr>
</table>
''')
class AppElement {
  List people = [
    {'name': 'Anderson', 'age': 35, 'city': 'Sao Paulo'},
    {'name': 'John', 'age': 12, 'city': 'Miami'},
    {'name': 'Peter', 'age': 22, 'city': 'New York'}
  ];
}

@Pipe(name: 'mapKeys')
class MapKeysPipe extends PipeTransform {
  Iterable prevKeys;
  dynamic transform(Map value, {List args}) {
    if (prevKeys != null &&
        value != null &&
        const UnorderedIterableEquality().equals(prevKeys, value.keys)) {
      return prevKeys;
    }
    prevKeys = value.keys;
    return prevKeys;
  }
}

Answer 2

要获取数组中当前项的索引，您可以使用$index

<tr *ngFor="#p of people; #idx = $index">
  <td>{{ idx }}</d>
  <td>{{ p.name }}</td>
  <td>{{ p.age }}</td>
  <td>{{ p.city }}</td>
</tr>