{オブジェクトオブジェクト}をテーブルに表示するにはどうすればよいですか？

Question

実際にはthis dataを表に表示したいと考えています。ここでは、データは{オブジェクトオブジェクト}でした。すべての通貨の "最後"、 "購入" & "売り"のすべての値を表示したいハードコードはできますが、ng-repeatまたはngForを使用してコード行を減らしたいと考えています。これのための条件を書くには？私は4

Answer 1

感謝を繰り返す、あなたの方法は正常に動作しました。しかし、私はこれを行うには、より簡単な方法を見つけました：

function generateArray(obj) { 
    return Object.keys(obj).map((key) => obj[key]); 
} 

これはアレイと

<tr *ngFor="let post of posts"> 
      <td>{{post.last}}</td> 
      <td>{{post.buy}}</td> 
      <td>{{post.sell}}</td> 
      </tr> 

これはテーブルにJSONを反復処理するようにJSONオブジェクトに変換します。

P.S：jsonを「投稿」から「obj」という「投稿」に保存しました。

Answer 2

角度あなたはパイプを作成する必要があり、その後、あなたがオブジェクトを反復処理することができます使用してい

。

@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]); 
    } 
} 

このplnkrが役立つ可能性があります。反復可能オブジェクト上で動作ngFor

plnkr

Answer 3

、そのため、あなたの場合には、最初の配列にJSONデータを変換する必要があります。あなたのHTMLコード内

let blockChainData:any = { ... } //data.retrieved.from.server; 
let blockChainDataArray:Array<any> = []; 

let dataKeys:Array<string> = Object.keys(blockChainData); 
dataKeys.forEach((key:string) => { 
    let entry:any = blockChainData[key]; // Retrieve the object associated with the currency 
    entry.originalCurrency = key; // Preserve the original currency 
    blockChainDataArray.push(entry); 
}); 

、アレイの上の回答の男性のための

<td *ngFor="let entry of blockChainDataArray">{{ entry.originalCurrency }} {{ entry.buy }} {{ entry.sell }} {{ entry.last }} </td>