以角度[重复]在对象上迭代

Question

我试图在Angular 2 Alpha 28中做一些事情，并且对字典和ngFor有问题。

我在TypeScript中有一个界面，如下所示：

interface Dictionary {
    [index: string]: string
}

在JavaScript中，这将转换为具有数据的对象，该对象可能看起来像这样：

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

我想重复一下，并尝试了以下方法：

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

在所有情况下，我都会收到错误，例如意外标记或找不到“iterableDiff”管道支持对象

我错过了什么？这再也不可能了吗？（第一个语法在Angular 1. x中工作）或者迭代对象的语法不同？

Answer 1

试试用这个管子

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ngFor="#value of object | values"> </div>

Answer 2

他们似乎不想支持ng1的语法。

根据Miško Hevery（参考文献）：

贴图在键中没有顺序，因此它们是不可预测的。这在ng1中得到了支持，但我们认为这是一个错误，在NG2中将不受支持

计划是有一个maptoIterable管道

因此，为了在对象上迭代，您需要使用“管道”。目前还没有实现这样的管道。

作为一种解决方法，这里有一个迭代键的小例子：

组成部分：

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
}

Answer 3

使用内置的keyvalue-管道，如下所示：

<div *ngFor="let item of myObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

或者像这样：

<div *ngFor="let item of myObject | keyvalue:mySortingFunction">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

其中mySortingFunction位于.ts文件中，例如：

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

Stackblitz：https://stackblitz.com/edit/angular-iterate-key-value

您不需要在任何模块中注册它，因为Angular管道在任何模板中都可以开箱即用。

它也适用于Javascript地图。