如何在table中显示{object object}？

Question

其实我想把this data显示成table。在这里，数据是{object object}。我想显示所有货币的 "last"、"buy" 和 "sell" 的所有值。我可以写硬代码，但我想通过使用 ng-repeat 或 ngFor 来减少代码行数。这个的条件怎么写？

我正在使用 Angular 4.

Answer 1

您需要创建一个管道，然后才能遍历对象。

@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 可能会对您有所帮助。

plnkr

Answer 2

ngFor 适用于可迭代对象，因此在您的情况下，您需要首先将 json 数据转换为数组。

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

在您的 html 代码中，遍历数组

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

Answer 3

感谢你们的回复，你们的方法很有效。但我找到了更简单的方法来做到这一点：

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

这会将 json 对象转换为数组并且

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

这会将 json 迭代为 table。

P.S：我已将 json 保存到 "posts" 中，名为 "obj" 来自 "posts"。

如何在table中显示{object object}？

How to display {object object} in a table?

json

tabular

ngfor

angular