迭代Angular中的对象

发布于07月21日

我正在try 在角2阿尔法28中做一些事情，并且在使用字典和ngFor时遇到了问题.

我有一个打印脚本的界面，如下所示:

interface Dictionary {
    [index: string]: string
}

在JavaScript中，这将转换为一个对象，其中包含的数据可能如下所示:

myDict={'key1':'value1','key2':'value2'}

我想重复一下，并try 一下:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

但以下方法都无济于事:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

在所有情况下，我都会出现Unexpected token或Cannot find 'iterableDiff' pipe supporting object这样的错误

我错过了什么？这不可能了吗？(第一种语法适用于Angular 1.x)或者迭代对象的语法不同吗？

推荐答案

他们似乎不想支持NG1中的语法.

根据MišKo Heach的说法:

映射在键中没有顺序，因此它们的迭代是不可预测的. 这在NG1中得到了支持，但我们认为这是一个错误，不会在NG2中受支持

计划是拥有一个mapToIterable管道

<div *ngFor"var item of map | mapToIterable">

因此，为了在对象上进行迭代，需要使用"管道".

作为一种解决方法，下面是一个小示例，它迭代了关键点:

Component:

import {Component} from 'angular2/core';

@Component({
  selector: 'component',
  templateUrl: `
       <ul>
       <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
       </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }

  keys() : Array<string> {
    return Object.keys(this.myDict);
  }
}

interface Dictionary {
    [ index: string ]: string
}