У меня есть данные, приведенные ниже, которые отображаются с использованием ng-контейнера в пользовательском интерфейсе. Все заголовки кликабельны и при клике массив расширяется.
let DataList = [
{
title: 'childless',
children: []
},
{
title: 'great grandparent',
isSelected: true,
children: [
{
title: 'childless grandsibiling',
children: []
},
{
title: 'grandparent',
children: [
{
title: 'childless sibiling',
children: []
},
{
title: 'another childless sibiling',
children: []
},
{
title: 'parent',
children: [
{
title: 'child',
children: []
},
{
title: 'another child',
children: []
},
]
},
{
title: 'another parent',
children: [
{
title: 'child',
children: []
},
]
},
]
},
{
title: 'another grandparent',
children: [
{
title: 'parent',
children: [
{
title: 'child',
children: []
},
{
title: 'another child',
children: []
},
{
title: 'a third child',
children: []
},
{
title: 'teen mother',
children: [
{
title: 'accident',
children: []
},
]
},
]
},
]
},
]
},
{
title: 'great grandparent',
isSelected: true,
children: [
{
title: 'childless grandsibiling',
children: []
},
{
title: 'grandparent',
children: [
{
title: 'childless sibiling',
children: []
},
{
title: 'another childless sibiling',
children: []
},
{
title: 'parent',
children: [
{
title: 'child',
children: []
},
{
title: 'another child',
children: []
},
]
},
{
title: 'another parent',
children: [
{
title: 'child',
children: []
},
]
},
]
},
{
title: 'another grandparent2',
children: [
{
title: 'parent2',
children: [
{
title: 'child2',
children: []
},
{
title: 'another child2',
children: []
},
{
title: 'a third child2',
children: []
},
{
title: 'teen mother2',
children: [
{
title: 'accident2',
children: []
},
]
},
]
},
]
},
]
}
].
Как передать цвет фона дочернему массиву, который отображается с использованием ng-контейнера, чтобы расширенный заголовок с его дочерним содержимым имел другой фон.
`<ng-template
#list
<ng-container *ngFor="let data of DataList">
<ng-container *ngIf="data.children && data.children.length > 0">
<ng-container *ngTemplateOutlet="list">
</ng-container>
</ng-container>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="list">
</ng-container>`