How to iterate a child object angular 4?

Question

Already have a service that passes objects to the DOM.

@Injectable()
export class DbService {
    db:Database[] = [
        {
        "id":0,
        "img":"../../../assets/img/logo/gro.png",
        "name":"Company,
        "type":"company type",
        "hours": "9:00AM-9:00PM",
        "number": 9999999,
        "email": 'info@company.com',
        "items": [
                    {'Beverage':['Bigga', 'Soda', 'Wata', 'Sprite']},
                    {'Canned':['Mackerel', 'Corn Beef', 'Tuna']}

                ]
        }...

Made it iterate here...

        <div class="storeDoor col-md-4 " *ngFor="let butt of db" [routerLink]="['/store', butt.name]">
            <div class="row">
                <div class="col-md-5">
                    <img src="{{butt.img}}" width="70%">
                </div>
                <div class="col-md-7">
                   <h3 class=" ">
                      {{butt.name}}
                   </h3>
                   <h6>
                      {{butt.type}}
                   </h6>
               </div>
            </div>
        </div>

And this opened the store front dynamically ...

                <div class="">
                        <h2 id="name" class="">{{store[0].name}}</h2>
                        <p style="color:grey; font-size: 16px"> Open Hours: {{store[0].hours}}</p>
                        <hr>

                </div>
                <div class="info">
                    <h5 class="badge badge-info">10/10</h5>
                    <h5>999 rating</h5>
                    <h5><i class="fa fa-phone fa-lg"></i> {{store[0].number}}</h5>
                    <h5>{{store[0].email}}</h5>

                    <button class="btn">Create Group Order</button>
                </div>

But now while the store is open, I am lost in how to iterate the items object, displaying only the key of the child object (Beverage, Canned)...

    <div class="aisle" >
        <a class="w3-bar-item" href="#" ></a>

    </div> 

Answer 1

In your component

objectKeys = Object.keys;

Then in html

  <div *ngFor="let item of store[0].items">
   <div *ngFor="let key of objectKeys (item)">Key : {{key}} Value: {{item[key]}}</div>
  </div>