list view component not rendering

[Jan]

I am implementing the ListView component, at first it rendered my list of sensors with a template, but from one moment to another it stopped working, that is, it no longer loads the list:

template

<div class="sensor-container">

<app-named-toolbar toolbarName="Variables por sensor">app-named-toolbar>

<div class="body">

<div class="sensores">

<span class="sensors">Sensoresspan>

<ejs-listview #sensorListView id="sensor-list-view" cssClass='e-list-template' [dataSource]="sensors" (select)="onItemSelect($event)" [showCheckBox]='false'>

<ng-template #template let-sensor>

<div class="item-container">

<div class="item-name-mode">

<span class="item-name">{{ sensor.nombre }}span>

<span class="item-mode">{{ sensor.modo }}span>

div>

<div class="toggle-container">

<ejs-switch cssClass="handle-color" [checked]="sensor.isChecked" (change)="onToggleSwitch($event, sensor)">ejs-switch>

div>

div>

ng-template>

ejs-listview>

div>

div>

div>

component:

import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';

import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

import { ListViewComponent, SelectEventArgs } from '@syncfusion/ej2-angular-lists';

@Component({

selector: 'app-sensor-list-view',

templateUrl: './sensor-list-view.component.html',

styleUrls: ['./sensor-list-view.component.scss'],

})

export class SensorListViewComponent implements OnInit {

@ViewChild('sensorListView') sensorListView!: ListViewComponent;

@ViewChild('variableListView') variableListView!: ListViewComponent;

public selectedSensor: any[] = [];

public sensors?: { [key: string]: Object; }[];

constructor() {}

ngOnInit() {

this.sensors = [

{ id: 7, text: "Ph Automático", modo: "automático", variable: "CVC", isChecked: true },

{ id: 8, text: "Oxígeno Disuelto Automático", modo: "automático", variable: "Prueba" },

{ id: 9, text: "Termometro Seco", modo: "convencional", variable: "Milagroso", isChecked: true },

{ id: 10, text: "Termometro Humedo", modo: "convencional", variable: "uv_max" },

{ id: 11, text: "Humedad Relativa", modo: "convencional", variable: "Precipitación" },

{ id: 12, text: "Humedad Relativa Automático", modo: "automático", variable: "PRUAB" },

{ id: 13, text: "Presion Atmosferica Automático", modo: "automático", variable: "E" },

{ id: 16, text: "Turbidez Automático", modo: "automático", variable: "ud" },

{ id: 17, text: "Tanque de Evaporacion", modo: "convencional", variable: "T_AGU" },

{ id: 18, text: "Termometro Automatico", modo: "convencional", variable: "W", isChecked: true },

{ id: 19, text: "Heliógrafo", modo: "convencional", variable: "TEN_VAPOR" },

{ id: 20, text: "T Máxima Psicrometro", modo: "convencional", variable: "ud_med" },

{ id: 21, text: "T Mínima Psicrometro", modo: "convencional", variable: "BRI_SOL" },

{ id: 23, text: "SDR", modo: "convencional", variable: "Q.desc2" },

{ id: 24, text: "Limnimetro", modo: "convencional", variable: "SED" },

{ id: 26, text: "Niv.Radar", modo: "convencional", variable: "P.Eventos" },

{ id: 27, text: "Potencia", modo: "convencional", variable: "uv_med" },

{ id: 28, text: "Descarga Fondo 1", modo: "convencional", variable: "Q.desc1" },

{ id: 29, text: "Descarga Fondo 2", modo: "convencional", variable: "O" },

{ id: 30, text: "Descarga Vertedero", modo: "convencional", variable: "I" },

{ id: 31, text: "Evaporación Automático", modo: "automático", variable: "p" }

];

}

private toggleItemChecked(item: any) {

item.isChecked = !item.isChecked;

}

onItemSelect2({ data }: SelectEventArgs) {

if (data) {

this.toggleItemChecked(data);

this.sensorListView.refresh();

}

}

onItemSelect($event: SelectEventArgs) {

const { data }: any = $event;

if (data) {

this.selectedSensor.length = 0;

this.selectedSensor.push(data);

this.variableListView.refresh();

}

}

onToggleSwitch($event: ChangeEventArgs, data: any) {

if (data) {

data.isChecked = $event.checked;

}

}

}

without using template:

using a template:

Error in console log:

ERROR TypeError: str.match is not a function

    at evalExp (ej2-base.es5.js:9484:23)

    at compile$1 (ej2-base.es5.js:9462:29)

    at Engine.compile (ej2-base.es5.js:9837:16)

    at compile$$1 (ej2-base.es5.js:9690:30)

    at ListView.preRender (ej2-lists.es5.js:1440:24)

    at Component.appendTo (ej2-base.es5.js:7398:18)

    at appendToComponent (component-base.js:151:35)

    at component-base.js:157:17

    at timer (zone.js:2408:41)

    at _ZoneDelegate.invokeTask (zone.js:409:31)

[Prasanth Madhaiyan]

Hi Jan,

Greetings from Syncfusion support.

We have validated your reported query in the Angular ListView component by preparing the sample using your shared details. We understand that you are facing an issue when preparing the Angular ListView Template sample at your end. However, we prepared the sample using your shared code snippets, and it rendered properly without any issues on our end.

For your reference, we have attached the sample.

Sample: https://stackblitz.com/edit/angular-cxetbs-bsd47b?file=src%2Fapp.component.html

Check out the attached sample, and if the issue still persists, could you please replicate the issue in the shared sample or share the replicated issue sample? Based on that, we will check and provide you with a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.