Issue
My issue is that table data is not printing and I think my problem is at my dataSource and i have no idea in what way i have to fix it.Ill share my model and related code for the issue. Here is my model
export class HubxModel{
id: number;
categoryId: number;
itemTitle: string;
itemUnit: string;
isActive: boolean=true;
itemValue: string;
patientId: number;
isDeleted: boolean;
}
and below code is how i define my dataSource
export class UserPatientsReportFormComponent implements OnInit {
displayedColumns: string[] = ['itemTitle', 'itemValue', 'itemUnit'];
hubxReportList : Array<HubxDataModel> = [];
and below code is my html section
<div class="row paddingTop headerpaddingbottom" >
<section class="col-sm-8 example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="hubxReportList " class="col-sm-12">
<ng-container matColumnDef="itemTitle">
<th mat-header-cell *matHeaderCellDef> Test Name </th>
<td mat-cell *matCellDef="let element"> {{element.itemTitle}} </td>
</ng-container>
<!-- value Column -->
<ng-container matColumnDef="itemValue">
<th mat-header-cell *matHeaderCellDef> Result </th>
<td mat-cell *matCellDef="let element"> {{element.itemValue}} </td>
</ng-container>
<!-- Unit Column -->
<ng-container matColumnDef="itemUnit">
<th mat-header-cell *matHeaderCellDef> Unit </th>
<td mat-cell *matCellDef="let element"> {{element.itemUnit}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</section>
</div>
result comes out like this table data not printing
and this is how i get my data from api
getHubxReport() {
//debugger
this.usersService.getHubxReport(this.clientId).subscribe((response: ResponseModel) => {
if (response != null && response.data != null && response.data.length > 0) {
this.hubxReportList = response.data;
}
}
);
}
after console.log(this.hubxReportList)
Solution
UPDATE:(included code example to show only the items of the exact category)
this.usersService
.getHubxReport(this.clientId)
.subscribe((response: any) => {
if (response?.data?.length > 0) {
this.hubxReportList = response.data.reduce((a, i) => {
if(i.categoryId === theCategoryIdWhichItemsShouldBeShown) { // <---------------------------- theCategoryIdWhichItemsShouldBeShown property should be replaced with the valid property that you have in your component
a.push(...(i?.hubxDataItems || []));
}
return a;
}, [] as any);
}
});
UPDATE:(included Stackblitz example)
https://stackblitz.com/edit/angular-mat-table-design-8ixhfs?file=src/app/app.component.ts
Actually, You are using the wrong fields to display in your Template. following your screenshot from Console, you don't have itemTitle
, itemValue
, and itemUnit
properties in hubxReportList
list, you have them inside hubxDataItems
property of each item, so if you are expecting to show the hubxDataItems
items in your table you need to modify your component code like as following.
getHubxReport() {
//debugger
this.usersService.getHubxReport(this.clientId).subscribe((response: ResponseModel) => {
if (response?.data?.length > 0) {
this.hubxReportList = response.data.reduce((a, i) => {
a.push(...(i?.hubxDataItems || []));
return a;
}, [] as any)
}
}
);
}
Answered By - Ashot Aleqsanyan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.