Question

我正在开发自己的可折叠树视图作为学习Angular 2的一种方法。我让它部分工作。现在，我被困在如何将隐藏属性应用于已单击的特定<li>项目上。这是我到目前为止所拥有的。

这是显示列表中的项目的html。

 <div>
     <ol>
          <li *ngFor="let item of videoList">
               <div>
                    <a *ngIf="item.nodes && item.nodes.length > 0" (click)="toggle()">{{item.title}}</a>
                    <a *ngIf="item.nodes <= 0">{{item.title}}</a>
               </div>
               <ol [hidden]="!collapsed">
                    <li *ngFor="let subItem of item.nodes">
                         <a *ngIf="subItem.nodes && subItem.nodes.length > 0" (click)="toggle()">{{subItem.title}}</a>
                         <a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
                         <ol [hidden]="!collapsed">
                              <li *ngFor="let video of subItem.nodes">
                                   <a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
                                   <a *ngIf="video.nodes <= 0">{{video.title}}</a>
                              </li>
                         </ol>
                    </li>
               </ol>
          </li>
     </ol>
</div>

以下是组件中折叠或展开列表的打字稿。

collapased = false;

toggle() {
   this.collapsed = !this.collapsed;
    }

目前，代码将顶层元素和第二层元素一起折叠和展开。我需要使列表中的每个项目独立于其他项目。我也更喜欢使用CSS来保持形式。

Answer 1

如果在前端模型中添加新属性，假设您使用的是前端模型，则可以一次切换一个项目：

export class Item {
    constructor (
        public nodes: Node[],
        public hidden: boolean) {}
}

<div>
     <ol>
          <li *ngFor="let item of videoList">
               <div>
                    <a *ngIf="item.nodes && item.nodes.length > 0" (click)="item.hidden = !item.hidden">{{item.title}}</a>
                    <a *ngIf="item.nodes <= 0">{{item.title}}</a>
               </div>
               <ol [hidden]="!item.hidden">
…

如果您没有使用这样的模型，那么我唯一能想到的就是使用您的数据随附的唯一ID为每个创建一个唯一的ID标记：

<a id="{{node.id}}"> </a>

然后，您可以根据这些元素的id属性进行隐藏和显示。我没有想法，但我确定别人会帮忙！

Answer 2

我有一个JavaScript对象列表“为他们刻录硬编码”每个对象都有属性id: 1, title: something, collapsed: true, and nodes: []我将折叠属性添加到每个节点并在我的html中执行以下操作。

<div>
     <ol>
          <li *ngFor="let item of videoList">
               <div (click)="item.collapsed = !item.collapsed">
                    <a *ngIf="item.nodes && item.nodes.length > 0">{{item.title}}</a>
                    <a *ngIf="item.nodes <= 0">{{item.title}}</a>
               </div>
               <ol >
                    <li *ngFor="let subItem of item.nodes" [hidden]="item.collapsed">
                         <div (click)="subItem.collapsed=!subItem.collapsed">
                              <a *ngIf="subItem.nodes && subItem.nodes.length > 0">{{subItem.title}}</a>
                              <a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
                         </div>
                         <ol>
                              <li *ngFor="let video of subItem.nodes" [hidden]="subItem.collapsed">
                                   <div>
                                        <a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
                                        <a *ngIf="video.nodes <= 0">{{video.title}}</a>
                                   </div>
                              </li>
                         </ol>
                    </li>
               </ol>
          </li>
     </ol>
</div>

基本上发生的事情是我正在更改所选节点的折叠属性。

使用Angular 2创建可折叠树视图

2 个答案: