Dart 访问地图'；s键和值，带省道中的@ngFor

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

鉴于：

飞奔 .html

---

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

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

$index

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

{{idx}}
{{p.name}}
{{p.age}}
{{p.city}

而不是

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

---

你是说索引吗？我仍然不能使用索引来获取地图中某个项目的键，这正是我要做的。感谢您无法从索引或dart？中的值获取密钥？。。。这是相当严重的限制。NgFor仅公开

$index

、

$偶数

、

$odd

和

$last

。在运行

NgFor

之前，您可能需要将

Map

转换为包含键的数组或列表。使用NgFor无法从索引或值中获取键，您可以使用Dart获取键、值和索引。然后您应该能够使用angular提供的索引，然后在

中使用Dart{{}

获取密钥，除非这是一个仅javascript的区域，然后是的，我可以看到问题。如果是这样，我的建议仍然是从我上面的评论中得出的，在那里你将需要的内容提取到一个对象数组中，然后将它们放入NgForGreat！就像一个符咒！谢谢，居里！效果很好。我只需要输入“args”作为可选参数（在MapKeysPipe类上的transform上）。

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

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

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

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

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;
  }
}