I have successfully displayed dataSource2 (example from Angular library) but I am facing issues rendering my own dataSource variable.
Despite making both data sources similar and using the Angular Material library in a consistent manner, I cannot figure out why my dataSource is not being rendered properly. Could it be an issue with how the Material library functions?
View the image showing the message on dataSource not being rendered
My TypeScript (.ts) file:
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BackendcallingService } from './../backendcalling.service';
import { AvailableRolesEntity, RoleFunctionsEntity, ChildRolesEntity } from 'src/models/AvailableRoles.model';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'app-roles',
templateUrl: './roles.component.html',
styleUrls: ['./roles.component.css']
})
export class RolesComponent implements OnInit {
jsondata: any;
jsonifiedrole: any;
availableRoles: any;
jsonifiedavailableRoles: any[];
dataSource: any = [];
dataSource2: any =[];
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; // Columns for example dataSource2
columnsToDisplay = ['name', 'priority', 'editUrl', 'active', 'createdId']; // Columns for my dataSource
ELEMENT_DATA: any[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
];
svc: any;
http: any;
response: any;
constructor(http: HttpClient, svc: BackendcallingService) {
this.http = http;
this.svc = svc;
}
ngOnInit() {
this.http.get('http://localhost:8080/epsdk-app-os/get_role?role_id=undefined')
.subscribe(response => {
this.response = response;
this.jsondata = JSON.parse(response.data);
this.role = this.jsondata.role;
this.jsonifiedrole = JSON.parse(this.role);
this.availableRoles = this.jsondata.availableRoles;
this.jsonifiedavailableRoles = JSON.parse(this.availableRoles);
this.dataSource2 = new MatTableDataSource<any>(this.ELEMENT_DATA); // Example data source
this.dataSource = new MatTableDataSource<any>(this.jsonifiedavailableRoles); // My datasource
console.log(this.jsondata);
console.log(this.role);
console.log(this.jsonifiedrole);
console.log(this.availableRoles);
console.log(this.jsonifiedavailableRoles);
});
}
}
The jsonifiedavailableRoles array structure might differ from ELEMENT_DATA which renders correctly as dataSource2.
Check out the image displaying how jsonifiedavailableRoles looks like
My HTML file:
<div>
<table mat-table [dataSource]="dataSource2" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div>
<br>
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="priority">
<th mat-header-cell *matHeaderCellDef> Priority </th>
<td mat-cell *matCellDef="let element"> {{element.priority}} </td>
</ng-container>
...
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
</div>