Доступ к ключу и значению карты с помощью @ngFor в Dart

Я не знаю, возможно ли это, но я искал и не видел никакой информации, касающейся доступа к ключу карты с помощью * 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>

Можно ли поместить строковое значение ключа в указанную позицию?

Спасибо

РЕДАКТИРОВАТЬ1 - уточнение

В dart цикл for можно использовать, как показано ниже, для доступа к ключу и значению карты.

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

Предлагает ли *ngFor такой механизм?


dart angular angular2-forms
person st_clair_clarke    schedule 03.02.2016    source источник
comment
Вы имеете в виду индекс?   -  person SnareChops    schedule 03.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вместо

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

использовать

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

Воссоздание вашего примера цикла Dart более трудоемко, потому что p.keys возвращает новую итерацию для каждого вызова. Это выдает сообщение об ошибке в режиме разработки

ИСКЛЮЧЕНИЕ: выражение «p.keys in AppElement@3:12» изменилось после проверки.

Чтобы обойти это, я создал канал для запоминания предыдущих ключей-итерируемых

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;
  }
}
person Günter Zöchbauer    schedule 03.02.2016
comment
Здорово! Работает как шарм! Спасибо - person st_clair_clarke; 03.02.2016
comment
Эй, Гюнтер! Это работало нормально. Мне просто нужно было указать args в качестве необязательного аргумента (при преобразовании класса MapKeysPipe). - person Felipe; 20.08.2020

arrow_upward
0
arrow_downward

Чтобы получить индекс текущего элемента в массиве, вы можете использовать $index

<tr *ngFor="#p of people; #idx = $index">
  <td>{{ idx }}</d>
  <td>{{ p.name }}</td>
  <td>{{ p.age }}</td>
  <td>{{ p.city }}</td>
</tr>
person SnareChops    schedule 03.02.2016
comment
Тем не менее я не могу использовать индекс для получения ключа элемента на карте, что я и пытаюсь сделать. Спасибо - person st_clair_clarke; 03.02.2016
comment
Вы не можете получить ключ из индекса или значения в дротике?... довольно серьезное ограничение. NgFor предоставляет только $index, $even, $odd и $last. Возможно, вам потребуется преобразовать Map в массив или список, включающий ключи, прежде чем запускать его через NgFor. - person SnareChops; 03.02.2016
comment
Вы НЕ МОЖЕТЕ получить ключ из индекса или значения с помощью NgFor. Вы можете получить ключ, значение и индекс с помощью Dart. - person st_clair_clarke; 03.02.2016
comment
Затем вы сможете использовать индекс, который дает вам angular, а затем использовать дротик внутри {{ }}, чтобы получить ключ, если только это не зона только для javascript, и тогда да, я вижу проблему. Если это так, моя рекомендация по-прежнему исходит из моего комментария выше, где вы извлекаете то, что вам нужно, в массив объектов, а затем помещаете их в NgFor. - person SnareChops; 03.02.2016