在Angular 4中迭代对象答案

【问题标题】：Iterate object in Angular 4在Angular 4中迭代对象
【发布时间】：2017-11-24 13:30:53
【问题描述】：

我有这个对象，我想要这样的东西：

【问题讨论】：

你已经尝试了什么？我认为如果您在 *ngIf 中有一个 *ngIf，这很容易解决
这个问题可能不是 Angular 特有的，它只是 JavaScript。无论如何，您可以使用管道将您的对象转换为数组，以便您可以轻松使用 *ngFor
我试图创建一个自定义管道，但没有成功..我错过了一些东西..

【解决方案1】：

您不能使用 ngFor 迭代对象。

首先将您的对象转换为“简单”JavaScript 的数组。无论如何，您可以在管道内执行此操作以确保安全性能，但这不是必需的。你的输出必须是这样的：

[{
 letter: 'C',
 cities: [{id: 1, name: 'Cisinau'}, {id: 10, name: 'Cluj Napoca'}]
},
{
 letter: 'I',
 cities: [{id: 3, name: 'Iasi'}]
}]

然后您可以为每个字母组使用 ngFor，为每个城市使用另一个 ngFor。

要将你的对象转换成这样的数组，试试这个管道：

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

@Pipe({name: 'objectToArray'})
export class ObjectToArrayPipe implements PipeTransform {
  transform(value: any): {letter: string, cities: any[]}[] {
    let result = [];

    Object.keys(value).map((key)=> {
        let group = {letter: key, cities: []});

        Object.keys(value[key]).map((key2)=> {
            group.cities.push(value[key][key2];
        });

        result.push(group);   
    });

    return result;
  }
}

像这样使用它：

<ng-container *ngFor="let group of (allDestinations | objectToArray)">
    {{group.letter}}
    <ng-container *ngFor="let city of group.cities">
        {{ city.name }}
    </ng-container>
</ng-container>

【讨论】：

如何使用这个管道？我的数据来自destinations.component.ts 中的服务器
您可以在模板中使用它。我更新了我的答案。

【解决方案2】：

你好，你可以使用对象方法

Object.keys(object).map((key)=> {
    console.log(key); // key
    console.log(object[key]); // value
});

【讨论】：

【解决方案3】：

在entries.pipe.ts

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

@Pipe({name: 'entries'}) export default class {
  transform = Object.entries; 
}

在app.module.ts（或其他）

import EntriesPipe from 'entries.pipe';

@ngModule({
  declarations: [EntriesPipe],
  exports: [EntriesPipe]
})

在你看来

<ul *ngFor="let entry of myObject | entries">
  <li>key: {{entry[0]}}</li>
  <li>value: {{entry[1]}}</li>
</ul>

【讨论】：

他仍然会在数组中有第二个对象，他无法迭代
他没有指定嵌套展平，但正如您在上面所写的那样可以很好地实现。这似乎是一个令人惊讶的默认行为。不过，这是一个非常有用的行为。