I am currently working on developing a web application using Angular and the SpringMVC Framework. One of the tasks I'm facing is loading a list of users (referred to as "consulenti" in the code). While the backend HTTP request works fine, I encounter errors when trying to handle the data in TypeScript on the frontend:
Cannot set property 'headerRow' of undefined at TablesComponent.ngOnInit (webpack-internal:///./src/app/tables/tables.component.ts:27
Cannot read property 'headerRow' of undefined
Cannot read property 'push' of undefined
These errors persist with other properties as well.
The goal is to display the user data in a table format, utilizing a free angular dashboard client template.
Below is a snippet of the code:
tables.component.ts
export class TablesComponent implements OnInit {
public consulenti: Consulente[];
public consulentiData: TableData;
private rows: number;
private cols: number;
constructor(private dataService: DataService) {} // Service injection
setRowData() {
if (this.rows != undefined && this.cols != undefined) {
for (let i = 0; i < this.cols; i++) this.consulentiData.dataRows[i] = this.consulenti[i].stringify();
}
// else error
}
ngOnInit() {
this.consulentiData.headerRow = ['Id', 'Nome', 'Cognome', 'E-mail', 'Scadenza contratto'];
this.dataService.getConsulenti().subscribe(data => {
for (let i = 0; i < data.length; i++) this.consulenti.push(data[i]);
});
this.rows = this.consulenti.length;
this.cols = this.consulenti[0].stringifyFields;
this.consulentiData.headerRow = ['Id', 'Nome', 'Cognome', 'E-mail', 'Scadenza contratto'];
this.setRowData();
}
tables.template.html
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<tr>
<th *ngFor="let cell of consulentiData.headerRow">{{ cell }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of consulentiData.dataRows">
<td *ngFor="let cell of row">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
Thank you for your assistance!
UPDATE
Continuing with the development process, I have run into a problem within the subscription method while fetching data from the http request and storing it in the "consulenti" array. After successful data retrieval during debugging, the array seems to become empty once the subscription ends.
Code
this.dataService.getConsulenti().subscribe((data: Consulente[]) => {
this.consulenti = data;
}); // encountering issues after this point.