2

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.

TAHA SULTAN TEMURI
  • 4,031
  • 2
  • 40
  • 66

1 Answers1

4

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.

StepUp
  • 36,391
  • 15
  • 88
  • 148