Есть ли способ передать свойство css во вложенный контейнер ng? - PullRequest
0 голосов
/ 22 октября 2019

У меня есть данные, приведенные ниже, которые отображаются с использованием 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>`
...