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

Question

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

鉴于：

.飞镖

 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

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

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

Answer 2

而不是

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

使用

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

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

EXCEPTION: Expression 'p.keys in AppElement@3:12' has changed after it was checked.

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

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

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

Accessing a map's key and value with @ngFor in Dart

dart

angular2-forms

angular

.飞镖

.html

EDIT1 - 澄清