在 HTML 中使用 *ngfor 指令解析 JSON

【问题标题】：Parsing JSON with *ngfor directive in HTML在 HTML 中使用 *ngfor 指令解析 JSON
【发布时间】：2017-02-27 15:06:55
【问题描述】：

我希望能够从这个 JSON 对象的 params 数组中获取并列出 keys（不是 values），使用ionic2 页面中的 *ngfor 指令。

{
 "id":"x",
 "name":"xxx",
 "code":"xxx",
 "description":"xxx",
 "params":
         [
          {"param1": "params1"},
          {"param2": "params2"},
          {"param3": "params3"}
         ]
}

我搜索了这个论坛，发现了一个使用管道的实现；但到目前为止我一直没有成功。我能够使用管道获得的最多的是数组索引，而不是 keys。

【问题讨论】：

标签： javascript json angular ionic2

【解决方案1】：

import { PipeTransform , Pipe } from '@angular/core';
@Pipe( { name : 'keys' } )
export class KeysPipe implements PipeTransform {
    transform ( value , args : string[] ) : any {
        let keys = [];
        for ( let key in value ) {
            if ( value.hasOwnProperty( key ) ) {
                keys.push( key );
            }
        }
        return keys;
    }
}

并像这样使用它：

                       <ul>
                          <li *ngFor="let item of obj.params  ">
                           <span  *ngFor="let key of item | keys  ">{{key  }}</span>
                          </li>
                        </ul>

这里是plunker

注意 plunker 使用 # ，你应该使用 let 代替，就像上面一样。

【讨论】：

威尔，快试试看，然后回复你@Milad
不幸的是，我得到了数组索引。所以我得到 0,1,2 而不是 param1, param2, param3。
像魅力一样工作！！！你现在是我的英雄！非常感谢，圣诞快乐！