Angular 如何在10页的HTML表格中显示JSON

我试图在Angular 10上的HTML表中显示数据，我在尝试区分“[object]”时遇到了这个错误。只允许使用数组和iTerable。我有以下的JSON：

{
“元数据”：{
“1.信息”：“每日价格（开盘价、高点、低点、收盘价）和成交量”，
“2.符号”：“petr4.SA”，
“3.上次刷新”：“2020-10-23”，
“4.输出大小”：“紧凑型”，
“5.时区”：“美国/东部”
},
“时间序列（每日）”：{
"2020-10-23": {
“1.打开”：“20.9400”，
“2.高”：“21.1400”，
“3.低”：“20.5400”，
“4.关闭”：“20.5700”，
“5.卷”：“61328500”
},
"2020-10-22": {
“1.打开”：“20.1000”，
“2.高”：“20.8400”，
“3.低”：“20.0500”，
“4.关闭”：“20.8400”，
“5.卷”：“98359400”
}
}

我的模型课：

导出类蜡烛{
日期：日期；
打开：字符串；
高：字符串；
低：字符串；
关闭：字符串；
卷：字符串；
}

我的服务级别：

导出类烛光服务{
建造师(
公共http:HttpClient
) { }
findAll（）：可观察{
返回这个.http.get（`${API_CONFIG.baseUrl}`）；
}
}

最后是HTML：

日期
打开
高
低
接近
卷
{{candle.data}
{{candle.open}}
{{candle.high}}
{{candle.low}
{{candle.close}
{{candle.volume}}

您可以使用Mat Angular（材料设计组件）表（）来构建表格，而不是编写复杂的代码。您可以轻松地操作要在屏幕上显示的数据。

我没有看到定义了ativoData，即使它是，它也不是数组或iterable

您需要获取

“Time Series（Daily）”

对象的值，并将其转换为数组（您可以使用

object.entries（）

执行此操作），然后将其存储到值

ativoData

然后，在HTML的

*ngFor

中，您还需要定义索引来访问每个日期。基本上，它看起来像

*ngFor=“let candle of ativoData；index as i”

最后，在使用给定索引进行插值时，可以访问如下所示的每个值：

{{candle[i]}} // this will give you the date
{{candle[i].open}} // now you can access each value of the date
{{candle[i].high}}
{{candle[i].low}}
.
.
.
so on and so forth

---

您需要一个函数来将数据转换为数组，以便它可以显示在模板上

写一个这样的函数

transformData（原始数据：任意）{
让processedData:Array=[]；
Object.keys（rawData[“时间序列（每日）”]| |[]）.forEach（key=>{
processedData.push({
日期：新日期（键），
打开：原始数据[“时间序列（每日）”][键][“1.打开”]，
高：原始数据[“时间序列（每日）”][键][“2.高”]，
低：原始数据[“时间序列（每日）”][键][“3.低”]，
关闭：原始数据[“时间序列（每日）”][键][“4.关闭”]，
卷：原始数据[“时间序列（每日）”][键][“5.卷”]
});
});
返回已处理的数据；
}

并在从服务接收到数据后调用它

差不多

this.ativoData=this.transformData（this.rawData）；

在庙里

日期
打开
高
低
接近
卷
{{candle.date | date}}
{{candle.open}}
{{candle.high}}
{{candle.low}
{{candle.close}
{{candle.volume}}

---

这是一个有效的

这里的错误似乎很简单；您的数据既不是数组也不是可写的。因为在

ngFor

中“只允许数组和可写的”这个“复杂的代码”是怎么回事？除此之外，即使您建议使用这个库，同样的问题仍然存在；数据不在数组中。