在 Angular 4 中迭代对象

Question

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

Answer 1

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

Answer 2

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

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

Answer 3

您不能使用 ngFor 遍历对象。

首先将您的对象转换为数组，即"simple" 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>

在 Angular 4 中迭代对象

Iterate object in Angular 4

ngfor

angular