Hi experts,
i have a web-sdk 1018.0.37 application using ad datagrid. Everything looks good to me but I get the follwoing error:
ERROR TypeError: Cannot read properties of undefined (reading 'length')
at DataGridComponent_Template (ɵcmp.js:336:5)
at executeTemplate (core.mjs:12199:9)
at refreshView (core.mjs:12062:13)
at refreshComponent (core.mjs:13157:13)
at refreshChildComponents (core.mjs:11852:9)
at refreshView (core.mjs:12112:13)
at refreshComponent (core.mjs:13157:13)
at refreshChildComponents (core.mjs:11852:9)
at refreshView (core.mjs:12112:13)
at refreshEmbeddedViews (core.mjs:13111:17)
When I remove the datagrid component the error is gone. I never reaches my service call etc.
html
<div class="aggregation-table">
<c8y-data-grid
[title]="title"
[columns]="columns"
[rows]="data"
class="content-fullpage d-flex d-col border-top border-bottom"
></c8y-data-grid>
</div>
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MonthPickerService } from '../../utitities/statistics-action-bar/month-picker/month-picker.service';
import { DeviceStatisticsService } from '../device-statistics.service';
import { gettext } from '@c8y/ngx-components';
import {
Column,
CoreModule
} from "@c8y/ngx-components";
import { DeviceGridModule } from "@c8y/ngx-components/device-grid";
@Component({
selector: 'device-aggregation',
templateUrl: './device-aggregation.component.html',
styleUrls: ['./device-aggregation.component.css'],
imports: [CoreModule, DeviceGridModule],
})
export class DeviceAggregationComponent implements OnInit, OnDestroy {
constructor(
private monthPickerService: MonthPickerService,
private deviceStatisticsService: DeviceStatisticsService,
) { }
monthChangedSubscription: Subscription
data= [
{
"className": "Class A",
"avgMinMea": 0,
"avgMaxMea": 24,
"monthlyThreshold": 200,
"count": 6187
},
{
"className": "Class B",
"avgMinMea": 24,
"avgMaxMea": 144,
"monthlyThreshold": 200,
"count": 110
},
{
"className": "Class C",
"avgMinMea": 144,
"avgMaxMea": 1440,
"monthlyThreshold": 50,
"count": 620
},
{
"className": "Class D",
"avgMinMea": 1440,
"avgMaxMea": 8640,
"monthlyThreshold": 50,
"count": 65
},
{
"className": "Class E",
"avgMinMea": 8640,
"avgMaxMea": 86400,
"monthlyThreshold": 50,
"count": 8
},
{
"className": "Class F",
"avgMinMea": 86400,
"avgMaxMea": "INFINITY",
"monthlyThreshold": 50,
"count": 0
}
];
deviceData: any;
title = "Device Aggregation";
columns: Column[] = [
{
name: "className",
header: "Device Class",
path: "className",
filterable: true,
},
{
name: "avgMinMea",
header: "Min Mea",
path: "avgMinMea",
filterable: true,
},
{
name: "avgMaxMea",
header: "Max Mea",
path: "avgMaxMea",
filterable: true,
},
{
name: "count",
header: "Total",
path: "count",
filterable: true,
},
];
ngOnInit(): void {
try {
this.monthChangedSubscription = this.monthPickerService.dateChanged.subscribe(async (selectedDate: Date) => {
this.deviceData = await this.deviceStatisticsService.getMonthlyDeviceAggregation(selectedDate)
console.log("###### Data: " + JSON.stringify(this.data))
// this.data = this.deviceData['totalDeviceClasses'] removed for static content
})
}
catch (err) {
console.log(gettext('Error creating table'))
console.error(err.message)
}
}
ngOnDestroy(): void {
if (this.monthChangedSubscription) {
this.monthChangedSubscription.unsubscribe()
}
}
}
Any hint would really help me.
Thanks,
Marco