在数据库中,我有 3 个数据,我通过 Rest-API 将它们发送到前端 Angular。这很好用。
在浏览器控制台中,您可以看到我通过 Rest-API 通过 node.js 获得的所有三个数据集: 它在浏览器控制台中的外观
浏览器控制台中的结果如下所示:
0:
device_id: 2885679
list: Array(1)
0:
dt: 1596608643
main:
humidity: 10
pressure: 7.86
temp: 120.052
temp_max: 40.052
temp_min: 20.052
__proto__: Object
__proto__: Object
length: 1
__proto__: Array(0)
message: "1"
__v: 0
_id: "5f2a63857ce17d64d49465a4"
在 typescript 组件 xy.component.ts 中,我的代码如下所示:
export class ContactsComponent {
chart: any = [];
constructor(private contactService: ContactService) { }
ngOnInit() {
this.contactService.getContacts()
.subscribe((res: any[]) => {
console.log(res);
for (let i = 0; i < res.length; i++) {
let temp_max = res[i]['list'].map(res => res.main.temp_max);
let temp_min = res[i]['list'].map(res => res.main.temp_min);
let alldates = res[i]['list'].map(res => res.dt)
console.log(alldates)
let deviceData = []
alldates.forEach((res) => {
let jsdate = new Date(res * 1000)
deviceData.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }))
})
console.log(deviceData)
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: deviceData,
datasets: [{
data: temp_max,
borderColor: '#3cba9f',
fill: false
}, {
data: temp_min,
borderColor: '#ffcc00',
fill: false
},
]
},
为什么console.log(deviceData)只返回迭代的最后一个值?我想返回所有值console.log(devicedata)以绘制基于 3 个时间戳的图形。在这里,当我只返回 1 个时间戳时。它以某种方式覆盖了 deviceData.push - Methode 的值。我的目标是绘制我拥有的所有数据点(请参阅浏览器控制台的屏幕截图)。
汪汪一只猫
相关分类