How to display key value pair both on ionic 4 by binding it in html ? #ionic:ionic-v3

#1

Hello,

i want to display the following data in HTML, please help me solving it ?

“sales_data”: {
“10”: 77,
“11”: 174,
“12”: 42,
“13”: 1691,
“14”: 80,
“15”: 109,
“16”: 63,
“17”: 55,
“18”: 680,
“19”: 57,
},

Html

 <div *ngfor="let data in Sales">
         <ion-col>
            <p style="margin-top: 15px;"> {{data}}</p> 
          </ion-col>
          <ion-col>
              <p style="margin-top: 15px;"> {{Sales[data]}} </p>
          </ion-col>
</div>

Ts

Sales : any = [];
#2
  <pre>
      sales_data : {{sales_data | json }}
  </pre>

	<ion-grid>
		<ion-row *ngFor="let data of sales_data | keyvalue">
			<ion-col>
				{{data.key}}
			</ion-col>
			<ion-col>
				{{data.value}}
			</ion-col>
		</ion-row>
	</ion-grid>

try this.

#3

No Use, pre tag is showing the whole sales_data.
but i want to show key and value separately,
*ngFor is not displaying anything, neither error nor result
just blank.