Мне нужна вспомогательная функция для обхода сложных объектных массивов с помощью ngFor - PullRequest
Новая
       23

Мне нужна вспомогательная функция для обхода сложных объектных массивов с помощью ngFor

0 голосов
/ 26 мая 2019

Я работаю над настройкой петли в угловых и я довольно новичок в этом. Обычно я мог бы сделать это без проблем, но так как мне дали странный объект данных для работы, я ужасно застрял. Мой код выглядит следующим образом.

Пока что я могу получить список от "children" в верхней части объекта, но я не могу идти дальше.

Вот мои данные 

{
   "type": "categoryGroup",
   "children": [
       "Apples",
       "Bananas",
       "Oranges"
   ],
   "Apples": {
       "type": "categorySubgroup",
       "children": [
           "Golden Delicious",
           "Granny Smith",
           "Macintosh"
       ],
       "Golden Delicious": {
           "type": "articleList",
           "articles": [
               {
                   "key": "article-1",
                   "name": "Article 1"
               },
               {
                   "key": "article-2",
                   "name": "Article 2"
               }
           ]
       },
       "Granny Smith": {
           "type": "articleList",
           "articles": [
               {
                   "key": "article-1",
                   "name": "Article 1"
               },
               {
                   "key": "article-2",
                   "name": "Article 2"
               }
           ]
       },
       "Macintosh": {
           "type": "articleList",
           "articles": [
               {
                   "key": "article-1",
                   "name": "Article 1"
               },
               {
                   "key": "article-2",
                   "name": "Article 2"
               }
           ]
       }
   },
   "Bananas": {
       "type": "categorySubgroup",
       "children": [
           "Lady's Finger",
           "Cavendish Bananas"
       ],
       "Lady's Finger": {
           "type": "articleList",
           "articles": [
               {
                   "key": "article-1",
                   "name": "Article 1"
               },
               {
                   "key": "article-2",
                   "name": "Article 2"
               }
           ]
       },
       "Cavendish Bananas": {
           "type": "articleList",
           "articles": [
               {
                   "key": "article-1",
                   "name": "Article 1"
               },
               {
                   "key": "article-2",
                   "name": "Article 2"
               }
           ]
       }
   },
   "Oranges": {
       "type": "categorySubgroup",
       "children": [
           "Blood Orange"
       ],
       "Blood Orange": {
           "type": "articleList",
           "articles": [
               {
                   "key": "article-1",
                   "name": "Article 1"
               },
               {
                   "key": "article-2",
                   "name": "Article 2"
               }
           ]
       }
   }
}

Вот часть HTML моего кода (которая с треском проваливается) 

<div class="col-md-12"  *ngFor="let category of fruit.categories.children">
    <div class="card">
        <div class="card__header">
            <h4 class="card__title">{{ category }}</h4>
        </div>
        <div class="card__body">
          <div class="row">
            <div class="col-md-4" *ngFor="let categoryGroup of category.children">
                <div class="subheader">{{ categoryGroup }}</div>
                <div>
                    <ul class="resource-list" *ngFor="let categoryItem of categoryGroup.articles">
                        <li>{{ categoryItem.name }}</li>
                    </ul>
                  </div>
              </div>
            </div>
        </div>
    </div>
</div>

Мне нужна помощь в зацикливании массивов объектов, возможно, в качестве вспомогательной функции с использованием массива "children". Любые мысли или помощь будет принята с благодарностью. Спасибо!

Ответы [ 2 ]

1 голос
/ 26 мая 2019

Попробуйте следующий код, пожалуйста. 

<div class="col-md-12"  *ngFor="let category of fruit.children">
  <div class="card">
      <div class="card__header">
          <h4 class="card__title">{{ category }}</h4>
      </div>
      <div class="card__body">
        <div class="row">
          <div class="col-md-4" *ngFor="let categoryGroup of fruit[category].children">
              <div class="subheader">{{ categoryGroup }}</div>
              <div>
                  <ul class="resource-list" *ngFor="let categoryItem of fruit[category].articles">
                      <li>{{ categoryItem.name }}</li>
                  </ul>
                </div>
            </div>
          </div>
      </div>
  </div>
</div>
0 голосов
/ 26 мая 2019

Вы можете получить данные, используя методы в компоненте, чтобы все было достаточно ясно. Вот пример объекта, который можно использовать для тестирования: 

export const data = {
  "type": "categoryGroup",
  "children": [
    "Apples",
    "Bananas",
    "Oranges"
  ],
  "Apples": {
    "type": "categorySubgroup",
    "children": [
      "Golden Delicious",
      "Granny Smith",
      "Macintosh"
    ],
    "Golden Delicious": {
      "type": "articleList",
      "articles": [
        {
          "key": "article-1",
          "name": "Article 1"
        },
        {
          "key": "article-2",
          "name": "Article 2"
        }
      ]
    },
    "Granny Smith": {
      "type": "articleList",
      "articles": [
        {
          "key": "article-1",
          "name": "Article 1"
        },
        {
          "key": "article-2",
          "name": "Article 2"
        }
      ]
    },
    "Macintosh": {
      "type": "articleList",
      "articles": [
        {
          "key": "article-1",
          "name": "Article 1"
        },
        {
          "key": "article-2",
          "name": "Article 2"
        }
      ]
    }
  },
  "Bananas": {
    "type": "categorySubgroup",
    "children": [
      "Lady's Finger",
      "Cavendish Bananas"
    ],
    "Lady's Finger": {
      "type": "articleList",
      "articles": [
        {
          "key": "article-1",
          "name": "Article 1"
        },
        {
          "key": "article-2",
          "name": "Article 2"
        }
      ]
    },
    "Cavendish Bananas": {
      "type": "articleList",
      "articles": [
        {
          "key": "article-1",
          "name": "Article 1"
        },
        {
          "key": "article-2",
          "name": "Article 2"
        }
      ]
    }
  },
  "Oranges": {
    "type": "categorySubgroup",
    "children": [
      "Blood Orange"
    ],
    "Blood Orange": {
      "type": "articleList",
      "articles": [
        {
          "key": "article-1",
          "name": "Article 1"
        },
        {
          "key": "article-2",
          "name": "Article 2"
        }
      ]
    }
  }
}

Теперь мы можем импортировать эти данные и создать несколько методов получения (например, в app.component.ts): 

import { Component } from '@angular/core'
import { data } from './data'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  data = data

  getFruits() {
    return data.children
  }

  getFruit(fruit: string) {
    return data[fruit]
  }

  getVarieties(fruit) {
    return data[fruit].children
  }

  getVariety(fruit, variety) {
    return data[fruit][variety]
  }

  getArticles(fruit, variety) {
    return data[fruit][variety].articles
  }

  getArticle(fruit, variety, article) {
    return data[fruit][variety][article]
  }
}

В шаблоне теперь можно использовать свойства следующим образом: 

<h1>Fruit Data</h1>
<p><span class="key">type:</span> {{ data.type }}</p>
<p><span class="key">children:</span> {{ data.children }}</p>
<hr>
<div class="fruit" *ngFor="let fruit of getFruits()">
    <h2>{{ fruit }}</h2>
    <p><span class="key">type:</span> {{ getFruit(fruit).type }}</p>
    <p><span class="key">children:</span> {{ getFruit(fruit).children }}</p>
    <div class="variety" *ngFor="let variety of getVarieties(fruit)">
        <h3>{{ variety }}</h3>
        <p><span class="key">type:</span> {{ getVariety(fruit, variety).type }}</p>
        <p><span class="key">articles:</span> {{ getArticles(fruit, variety) | json }}</p>
        <div class="article" *ngFor="let article of getArticles(fruit, variety)">
            <p><span class="key">key:</span> {{ article.key }}</p>
            <p><span class="key">name:</span> {{ article.name }}</p>
        </div>
    </div>
</div>
...