オブジェクト名を指定せずにangle2出力オブジェクトの値を

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

私はそれはあなたを助けることができると思います。

Answer 2

この動作は、一つの成分だけにローカルである場合、あなたは、オブジェクトのプロパティを一覧表示し、その中にゲッター定義することができます。以下のテンプレートを使用して

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