html中的angular2输出对象值而不指定对象名称答案

【问题标题】：angular2 output object value in html without specifying object namehtml中的angular2输出对象值而不指定对象名称
【发布时间】：2016-09-09 12:52:22
【问题描述】：

我正在尝试使用ngFor 在 HTML 中输出 JSON 值，但没有指定对象名称以在 HTML 中呈现值，这是否可能？

我知道我必须指定对象名称才能实际呈现值，如下例所示。

假设我有这个 JSON 对象：

'customerObjs':'Ob1'
'FirstName': 'Name'
'Something': 'Something'

而在 HTML 中，我必须执行类似下面的代码来显示值，

<div *ngFor="let obj of Objects">
   {{ obj.FirstName }}
</div>

但是，即使您不知道对象名称，也可以渲染该值。因为如果后端人员添加了 YouDontKnowWhatThisIs 的新对象，那么 HTML 仍应呈现该 YouDontKnowWhatThisIs 的值。

所以它更多的是通过硬编码对象名称来动态输出响应。

这可能吗？如果是这样，有人可以举个例子吗？

【问题讨论】：

你能提供一个plunker吗？您需要提供更多信息才能获得一些好的帮助。看看你的customerObjs，实际上它是一个列表而不是一个对象。它甚至不起作用，因为它是无效的 JSON。但是，尝试使用 json 管道，例如：{{obj | json}} 所以你会看到所有的对象字段。
编辑了我的 customerObj，使用管道？
每次我在线diplsy json都是用<pre>{{ Objects | json:true }}</pre>

标签： javascript html json angular

【解决方案1】：

您可以使用自定义管道从对象中提取键和值，以便根据需要使用它们。

keys.pipe.ts

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

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

myview.html

<p *ngFor="let object of objects | keys">
  <b>{{object.key}}</b>
  <span>{{object.value}}</span>
</p>

希望对你有帮助。

【讨论】：

【解决方案2】：

如果此行为仅对一个组件是本地的，您可以在其中定义一个 getter 来列出对象中的属性：

@Component({/*...*/})
export class {
    private obj;

    get props() {
        return obj ? Object.keys(this.obj.prop): []
    }
}

使用以下模板：

<div *ngFor="let prop in props">
   {{obj[prop]}} 
</div>

【讨论】：

在阅读此答案之前，我现在就是这样做的。会给它一个赞成票:)。

【解决方案3】：

如果你只是调试一个对象，你可能会比厚颜无耻的 JSON.stringify 等价物做得更糟：

<pre>{{object | json}}</pre>

【讨论】：