Свернуть / развернуть вложенный div в Angular 6

Question

Я разрабатываю график, подобный структуре, используя div.И мой дизайн выглядит следующим образом.

То, что я хочу, это при загрузке, должен отображаться только 1-й уровень (все места) и при нажатии на место его непосредственный ребенок должен отображатьсяи так далее.Есть ли способ сделать это.Мой HTML-код:

<div class="div-table">
    <div class="div-table-row">
        <div class="div-header-col" style="visibility: hidden;">A</div>
        <div *ngFor="let date of dates" class="div-date-col">{{date | date:'d E'}}</div>
    </div>


    <!-- level1 -->
    <div *ngFor="let venue of venues" class="level1" style="color: red">
        <div class="div-table-row-level1" >
            <div class="div-header-col">{{venue.name}}</div>
            <div *ngFor="let x of dates" class="div-event-level1-col"></div>
        </div>

        <!-- level2 -->
        <div *ngFor="let category of venue.categories" class="level2" style="color: blue">
            <div class="div-table-row-level2">
                <div class="div-header-col" style="padding-left: 10px">{{category.name}}</div>
                <div *ngFor="let x of dates" class="div-event-level2-col"></div>
            </div>

            <!-- level3 -->
            <div *ngFor="let asset of category.assets" class="level3" style="color: green">
                <div class="div-table-row-level3">
                    <div class="div-header-col" style="padding-left: 20px">{{asset.name}}</div>
                    <div *ngFor="let x of dates" class="div-event-level3-col assest-hover" "></div>
                </div>
            </div>

        </div>
    </div>
</div>

Мои данные для таблицы (div):

[  
   {  
      "id":1,
      "name":"venue1",
      "categories":[  
         {  
            "id":1,
            "name":"cat1",
            "assets":[  
               {  
                  "id":1,
                  "name":"assest1"
               },
               {  
                  "id":2,
                  "name":"assest2"
               }
            ]
         },
         {  
            "id":2,
            "name":"cat2",
            "assets":[  
               {  
                  "id":3,
                  "name":"assest3"
               },
               {  
                  "id":4,
                  "name":"assest4"
               }
            ]
         }
      ]
   },
   {  
      "id":2,
      "name":"venue2",
      "categories":[  
         {  
            "id":3,
            "name":"cat3",
            "assets":[  
               {  
                  "id":5,
                  "name":"assest5"
               },
               {  
                  "id":6,
                  "name":"assest6"
               }
            ]
         },
         {  
            "id":4,
            "name":"cat4",
            "assets":[  
               {  
                  "id":7,
                  "name":"assest7"
               },
               {  
                  "id":8,
                  "name":"assest8"
               }
            ]
         }
      ]
   },{  
      "id":3,
      "name":"venue3",
      "categories":[  
         {  
            "id":5,
            "name":"cat5",
            "assets":[  
               {  
                  "id":9,
                  "name":"assest9"
               },
               {  
                  "id":10,
                  "name":"assest10"
               }
            ]
         },
         {  
            "id":6,
            "name":"cat6",
            "assets":[  
               {  
                  "id":11,
                  "name":"assest11"
               },
               {  
                  "id":12,
                  "name":"assest12"
               }
            ]
         }
      ]
   }
]

Answer 1

Если у вас есть целые данные, загруженные вместе, у вас есть хорошая новость, что их можно реализовать очень простым способом -

Вы можете поиграть Element Reference.Ничего не нужно управлять из файла ts.

в html

   <div *ngFor="let venue of venues" class="level1" style="color: red" 
      (click)="ele.class = ele.class == 'showChildren' ? '' :  'showChildren'"
  [ngClass]="{ hideChildren : ele.class !== 'showChildren' }">

Повторите то же самое для всех parent div

в CSS

.hideChildren>div{
   display: none;
}

Вот рабочая копия - https://stackblitz.com/edit/angular-n43ihd

Существует еще один способ обработки, если данные выбираются асинхронно.Затем эта логика переместится в файл ts.

Answer 2

Вы можете попытаться скрыть загружаемые компоненты и установить их видимыми на Клик

$scope.$on('$viewContentLoaded', function() {
    // Hide all unwanted div's here
});