如何在表格中显示 {object object}？答案

【问题标题】：How to display {object object} in a table?如何在表格中显示 {object object}？
【发布时间】：2018-01-25 10:47:29
【问题描述】：

实际上我想将this data 显示到表格中。在这里，数据是 {object object}。我想显示所有货币的“last”、“buy”和“sell”的所有值。我可以编写硬代码，但我想通过使用 ng-repeat 或 ngFor 来减少代码行数。这个条件怎么写？

我正在使用 Angular 4。

【问题讨论】：

你试过什么代码？
实际上我不知道在这种情况下进行迭代。因为，对象内有对象。如果它是一个数组，我可以使用 ngFor。
您可以尝试将此对象转换为数组，然后使用 *ngFor 对其进行迭代
我不建议这样做。此外，因为只有三个值，您并没有真正减少代码长度，而且可读性也差很多。
@Christian，我想你没有理解我的问题。顺便说一句，我得到的答案很少，现在正在研究它。请参阅以下答案中的 plnkr 示例。这正是我所需要的。

标签： json angular tabular ngfor

【解决方案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

【讨论】：

我不会使用 pure:false。这样，在每次值更改后，管道都会再次执行。

【解决方案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>

【讨论】：

【解决方案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 迭代到一个表中。

P.S：我已将 json 从“posts”保存到名为“obj”的“posts”中。

【讨论】：