在Angular 6中折叠/展开嵌套的div

Posted 2023-03-05

【中文标题】在Angular 6中折叠/展开嵌套的div

【英文标题】：Collapse/Expand nested div in Angular 6

【发布时间】：2019-03-21 22:03:54

【问题描述】：

我正在使用 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"
               
            ]
         
      ]
   
]

【问题讨论】：

Html 模板看起来不错。这里的挑战是什么？

@SunilSingh 根据点击隐藏和显示元素...

@SunilSingh 首次加载时，仅应显示 LEVEL 1，当单击任何 LEVEL 1 时，应显示其子 LVEL 2。等等。这就是这里的挑战。

【参考方案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文件。

【讨论】：

谢谢。这适用于扩展。但它会与 COLLAPSE 功能一起使用吗？我会想办法解决这个问题。

用折叠选项更新了答案。注意：css 更改也更改为处理最近的孩子。

非常感谢您的详细回答，我正在努力使其与最初扩展的所有内容一起工作，但似乎无法做到，您能帮我吗？

我终于让它像这样(click)="ele.class = (ele.class == 'showChildren') ? 'hideChildren' : 'showChildren'" [ngClass]=" hideChildren : ele.class == 'showChildren', showChildren : ele.class == 'hideChildren'" 工作了。无论如何，谢谢！

【参考方案2】：

您可以尝试隐藏组件的加载，并将它们设置为可见 onClick

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

【讨论】：

我曾尝试使用 css。但挑战在于如何显示被点击的父级的正确子级。