Вы можете получить данные, используя методы в компоненте, чтобы все было достаточно ясно. Вот пример объекта, который можно использовать для тестирования:
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>