如何使用*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指令访问它.有任何想法吗？

UPDATE

我想要做的是呈现以下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

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

在TypeScript文件上:

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

在模板(html)上:

*ngFor="let item of list"

Answer 2

只需从管道返回键而不是值,然后使用键来访问值:

(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的例子

另请参阅基于Angular2中的枚举选择

Answer 3

更新

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

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

Plunker示例

以前的版本

你可以尝试这样的事情

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