Angular 2: Как бы вы отображали массив в виде пары пар ключ/значение?

Question

Я извлекаю данные JSON из внешнего источника данных, а часть полезной нагрузки - это массив, который нужно отображать в виде пары пар ключ/значение.

Я понимаю, что одним из способов было бы преобразование массива в интерфейс/объект через TypScript, но в моем случае данные должны быть преобразованы декларативно в разметку html шаблона Angular.

Таким образом, учитывая некоторые данные в виде: heroes = ['Hurricane', 12, 'Wolf', 42, 'Zephyr', 28]

Отображение данных через * ngFor:

<div *ngFor="let hero of heroes"> 
{{hero}} 
</div> 

будет оказывать:

Hurricane
Wolf
Zephyr

Однако то, что мне нужно, чтобы отобразить это:

Hurricane - 12
Wolf - 42
Zephyr - 28

Есть ли способ сделать это декларативно внутри Угловая 2 файл шаблона?

См Plunkr here

Answer 1

Вы можете преобразовать массив, полученный с использованием массива Extras в объекты, которые лучше соответствуют вашей точки зрения.

['Hurricane', 12, 'Wolf', 42, 'Zephyr', 28] 
    .map(function(curr, index, arr) { 
     if(typeof curr === 'number') 
      return {name: arr[index-1], id: curr } 
     }) 
    .filter(function(val) { return val }) 

https://blogs.msdn.microsoft.com/ie/2010/12/13/ecmascript-5-part-2-array-extras/

Answer 2

вы можете изменить heroes = [{name:'Hurricane', age:12}, {name:'Wolf', age:42}, {name:'Zephyr', age:28}]

Показать данные <div *ngFor="let hero of heroes"> {{hero.name}} - {{hero.age}} </div>

Answer 3

Я создал функцию внутри компонента с помощью кода cboston в:

mapArray(args){ 
    var results = args.map(function (current, index, arr) { 
     if(typeof current == 'number'){ 
      return { 
       name: arr[index - 1], 
       age: current 
      } 
     } 
    }).filter(function(val) { 
     return val; 
    }); 

    return results; 
} 

Затем Угловое 2 стороне клиента разметки выглядит следующим образом:

<div *ngFor="let hero of mapArray(heroes)"> 
    {{hero.name}} : {{hero.age}} 
</div> 

шлепнуть доступно здесь: http://plnkr.co/edit/YnIL5drfWzIL5gMc1Efd?p=info