Question

我尝试使用ngFor在HTML中输出JSON值而不指定要在HTML中呈现值的对象名称，这是否可能？

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

我们说我有这个JSON对象：

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

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

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

然而，即使您不知道对象名称，我们的想法是渲染价值。因为如果后端人员添加了YouDontKnowWhatThisIs的新对象，那么HTML应该仍然呈现YouDontKnowWhatThisIs的值。

因此，它更多地通过对对象名称进行硬编码来动态输出响应。

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

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

我希望它可以帮到你。

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

Answer 3

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

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

html中的angular2输出对象值，不指定对象名称

3 个答案: