我正在建立一个角度循环,对此我很陌生。通常我可以做到这一点没问题,但是由于我得到了一个奇怪的数据对象来工作,因此我陷入了困境。我的代码如下。
到目前为止,我可以从对象顶部的“儿童”获得列表,但是我不能再走了。
这是我的数据
{
"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>
我想要一些帮助遍历对象数组的帮助,也许可以作为使用“儿童”数组的辅助函数。任何想法或帮助将不胜感激。谢谢!
答案 0 :(得分: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>
答案 1 :(得分:0)
您可以使用组件中的方法来获取数据,以使事情保持清楚。这是可以用于测试的示例对象:
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>