如何迭代子对象angular 4？

Question

已有将对象传递给 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']}

                ]
        }...

让它在此处迭代...

        <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>

这将动态打开店面...

                <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>

但是现在商店开张时，我不知道如何迭代 items 对象，只显示子对象（饮料、罐头）的键...

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

    </div>

Answer 1

在你的组件中

objectKeys = Object.keys;

然后在html

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

Answer 2

试试下面的代码，它会分别打印饮料和罐头。

<div *ngFor="let butt of db" >
    <div *ngFor="let items of butt.items">
      <div *ngFor="let beverages of items.Beverage">
        {{beverages}}
      </div>
      <div *ngFor="let canned of items.Canned">
        {{canned}}
      </div>
    </div>
  </div>

在组件文件中从服务层获取数据

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {appService} from '../../providers/app.service';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  db : any;

  constructor(public navCtrl: NavController, public appService : appService, public getMonthsService : GetMonthsService) {
    this.db=appService.db;
  }

}

在服务文件中放置您的样本输入

import { Injectable }     from '@angular/core';

@Injectable()
export class appService{
  service : any="summa";
  db:any[] = [
        {
        "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']}

                ]
        }
  ];
}

如何迭代子对象angular 4？

How to iterate a child object angular 4?

multidimensional-array

angular

angular4-router