CODEWITHSUNDEEP
angulartypescript
TAHA SULTAN TEMURI
TAHA SULTAN TEMURI

Reputation: 5191

Print Key Values In Angular 8

Consider the dataSet which has table has following rows

Table

0: {date: "29-October-2019", flow: 0, max: 155.98, min: 155.98, avg: 155.98}
1: {date: "30-October-2019", flow (cft): 0, max: 27.03, min: 27.03, avg: 27.03}

Now I would like to iterate this each row and print all its columns in Angular like concept in c#

   @foreach (DataRow row in Model.Tables[0].Rows)
        {
                        <tr>

                            @foreach (DataColumn column in Model.Tables[0].Columns)
            {

                                <td>

                                    @row[column.ColumnName]

                                </td>
                            }

                        </tr>
                    }

Currently I am doing this

objectValues = Object.values;

    <tr *ngFor="let row of  dataSet.table.length">

            <td *ngFor="let val of objectValues(row)">
                {{row[val]}}
             </td>
         </tr>

but this throws

enter image description here

Please help.

Upvotes: 2

Views: 1903

Answers (1)

StepUp
StepUp

Reputation: 38114

As Angular docs says:

Transforms Object or Map into an array of key value pairs.

Use built in pipe for the same named as keyvalue pipe to iterate through objects: 

<tr *ngFor="let row of  dataSet.table  | keyvalue">
    <td *ngFor="let val of row | keyvalue">
       {{row[val]}}
    </td>
</tr>

UPDATE:

You have array of objects. So you can use just simple *ngFor:

HTML:

<div *ngFor="let item of arr">
    {{item?.min}}
    <!--{{item | json}}-->     
</div>

TypeScript:

export class AppComponent {
  arr = [
    {date: "29-October-2019", flow: 0, max: 155.98, min: 155.98, avg: 155.98},
    {date: "30-October-2019", flow : 0, max: 27.03, min: 27.03, avg: 27.03}
  ];
}

Please, see a stackblitz example.

Upvotes: 4

Related Questions