如何使用 *ngFor 迭代对象键？

Question

我一直在四处挖掘，发现我可以使用以下方法在对象上使用 *ngFor：

 <div *ngFor="#obj of objs | ObjNgFor">...</div>

其中 ObjNgFor 管道是：

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

然而，当我有这样一个对象时：

{
"propertyA":{
    "description":"this is the propertyA",
    "default":"sth"
 },
"propertyB":{
    "description":"this is the propertyB",
    "default":"sth"
 }
}

我不太确定如何提取 'propertyA' 和 'propertyB'，以便可以从 *ngFor 指令访问它们。有什么想法吗？

更新

我想做的是呈现以下内容 HTML:

        <div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
            <div class="parameter-desc">
                {{SOMETHING}}:{{obj.description}}
            </div>
        </div>

其中某物等于 propertyA 和 propertyB（这就是对象的结构）。因此，这将导致：

propertyA:this is the propertyA
propertyB:this is the propertyB

Answer 1

只需 return 来自管道的键而不是值，然后使用键访问值：

（let 而不是 beta.17 中的 #）

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

@Component({
    selector: 'my-app',
    pipes: [ObjNgFor],
    template: `
    <h1>Hello</h1>
 <div *ngFor="let key of objs | ObjNgFor">{{key}}:{{objs[key].description}}</div>    `,
})
export class AppComponent {
  objs = {
    "propertyA":{
      "description":"this is the propertyA",
      "default":"sth"
    },
    "propertyB":{
      "description":"this is the propertyB",
      "default":"sth"
    }
  };
}

Plunker example

另见

Answer 2

更新

在6.1.0-beta.1中引入KeyValuePipehttps://github.com/angular/angular/pull/24319

<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

Plunker Example

以前的版本

你可以试试这样的

export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => Object.assign({ key }, value[key]));
    }
}

然后在您的模板上

  <div *ngFor="let obj of objs | ObjNgFor">
   {{obj.key}} - {{obj.description}}
  </div>

Plunker

Answer 3

或者不是创建管道并将对象传递给 *ngFor，而是将 Object.keys(MyObject) 传递给 *ngFor。它 returns 与管道相同，但没有麻烦。

在 TypeScript 文件上：

let list = Object.keys(MyObject); // good old javascript on the rescue

在模板上（html）：

*ngFor="let item of list"

Answer 4

keys.pipe.ts

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

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(obj: Object, args: any[] = null): any {
        let array = [];
        Object.keys(obj).forEach(key => {
            array.push({
                value: obj[key],
                key: key
            });
        });
        return array;
    }
}

app.module.ts

import { KeysPipe } from './keys.pipe';

@NgModule({
  declarations: [
    ...
    KeysPipe
  ]
})

example.component.html

<elem *ngFor="let item of obj | keys" id="{{ item.key }}">
    {{ item.value }}
</elem>

Answer 5

这个例子没有使用管道

*ngFor="let Value bof Values; let i = index"

{{i}}

如何使用 *ngFor 迭代对象键？

How to iterate object keys using *ngFor?

object

typescript

ngfor

angular

更新