Issue in Table data in angular.Printing multiple times at each row

Issue

This Content is from Stack Overflow. Question asked by KingCk

I’m trying to create a table which i’m trying to feed three data that is itemTitle,itemValue and itemUnit.

This is my model 
export class HubxDataModel{ 
    categoryId:number;
    categoryName:string;
    HubxDataItems:HubxModel;
}
export class HubxModel{ 
    id: number;
    categoryId: number;
    itemTitle: string;
    itemUnit: string;
    isActive: boolean=true;
    itemValue: string;
    patientId: number;
    isDeleted: boolean;
}

and this is how i declare my model in my component class

hubxReportList : Array<HubxDataModel> = [];

And this is my table header

headers = ["Test Name","Result","Unit"];

and this is the Html that i used to create my table

<table>
  <tr>
    <th *ngFor="let column of headers">
       {{column}}
   </th>
 </tr>
 <tr *ngFor="let item of hubxReport.hubxDataItems">
   <td *ngFor="let column of headers">
      {{item.itemTitle}}{{item.itemValue}}{{item.itemUnit}}
  </td>
 </tr>

I’ll share my table image.Here HBA1C is the itemTitle(Test Name), 18 is the itemValue(Result) and mmol is the itemUnit(Unit).All the three data is priting in each column multiple times.How can i fix it.
table

the code i tried to solve the issue but having issue. At the below line of i’m trying to supply column data

{{item.itemTitle[column]}}{{item.itemValue[column]}}{{item.itemUnit[column]}}

but this code has issue i think i have to specify which column should be used in itemTitle,itemValue and itemUnit.
I need to know the correct way to specify the below code is what i tried to specify the columns data

{{item.itemTitle[column == "TestName"]}}{{item.itemValue[column == "Result" ]}}{{item.itemUnit[column == "Unit"]}}



Solution

Check the Answers

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?