我需要一个辅助函数来使用 ngFor 遍历复杂的对象数组

Question

我正在努力建立一个角度循环，我对此很陌生。通常我可以做到这一点没有问题，但因为我得到了一个奇怪的数据对象来使用我非常卡住。我的代码如下。

到目前为止，我可以从对象顶部的“孩子”中获取列表，但我不能再进一步了。

这是我的数据

{
   "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”数组的辅助函数。任何想法或帮助将不胜感激。谢谢！

Answer 1

请尝试以下代码。

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

Answer 2

您可以使用组件中的方法来获取数据以保持清晰。这是一个可用于测试的示例对象：

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"
        }
      ]
    }
  }
}

现在，我们可以导入这些数据并创建一些 getter（例如在 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>