我需要一个辅助函数来使用 ngFor 循环遍历复杂的对象数组
I need a helper function to loop through complex object arrays with ngFor
我正在 angular 中设置一个循环,我对此很陌生。通常我能够做到这一点没有问题,但因为我得到了一个奇怪的数据对象来处理我非常卡住。我的代码如下。
到目前为止,我可以从对象顶部的 "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" 数组的辅助函数。任何想法或帮助将不胜感激。谢谢!
请尝试以下代码。
<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>
您可以使用组件中的方法获取数据,以使事情更加清晰。这是一个可用于测试的示例对象:
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>
我正在 angular 中设置一个循环,我对此很陌生。通常我能够做到这一点没有问题,但因为我得到了一个奇怪的数据对象来处理我非常卡住。我的代码如下。
到目前为止,我可以从对象顶部的 "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" 数组的辅助函数。任何想法或帮助将不胜感激。谢谢!
请尝试以下代码。
<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>
您可以使用组件中的方法获取数据,以使事情更加清晰。这是一个可用于测试的示例对象:
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>