When using Angular material to display a list, I am facing an issue where the content of the list is not being displayed but the header is.
Component:
export class CompaniesComponent implements OnInit {
displayedColumns: string[] = ['id'];
data: Company[] = [];
isLoadingResults = true;
constructor(private api: ApiService) { }
ngOnInit() {
this.api.getAllCompanies()
.subscribe(res => {
this.data = res;
console.log(this.data);
this.isLoadingResults = false;
}, err => {
console.log(err);
this.isLoadingResults = false;
});
}
}
html:
<div class="example-container mat-elevation-z8">
<div class="example-loading-shade"
*ngIf="isLoadingResults">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="data" class="example-table"
matSort matSortActive="id" matSortDisableClear matSortDirection="asc">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>Id</th>
<td mat-cell *matCellDef="let row">{{row.Id}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>
</div>
</div>
result: https://i.sstatic.net/BsFJ8.png
list element format (json):
{
"id": 21,
"companyName": "iErjVkVG",
"companyDescription": "12345",
"rating": 1,
"companyValuation": 756,
"salary": 3.22,
"professionalGrowth": 2.56,
"companyBenefits": 2.44,
"communicationWithColleagues": 2.67,
"educationSector": 3.11,
"numberOfVotes": 0
}
Could someone help me identify where I might be going wrong as this issue should not be happening at all?
UPDATE
Company class:
export class Company {
Id: number;
CompanyName: string;
CompanyDescription: string;
Rating: number;
CompanyValuation: number;
Salary: number;
ProfessionalGrowth: number;
CompanyBenefits: number;
CommunicationWithColleagues: number;
EducationSector: number;
}
data$ method:
export class CompaniesComponent implements OnInit {
displayedColumns: string[] = ['id'];//, 'companyName'];
data$: Observable<Company[]>;
isLoadingResults = true;
constructor(private api: ApiService) { }
ngOnInit() {
this.data$ = this.api.getAllCompanies();
console.log(this.data$);
}
}
and html:
<table mat-table #table [dataSource]="data$" class="example-table"
matSort matSortActive="id" matSortDisableClear matSortDirection="asc">