Question

我想使用带有加/减按钮的UL和LI来创建我的自定义树列表。结构如下。

1和2将使图标保持为PLUS，当我们单击任何人时，一个相应的图标将转换为MINUS。我想在这里使用单个切换方法。这是因为一棵树有n个数据。

我能够创建此结构，但无法为所有要切换的节点实现单个切换按钮。

<ul>
  <li *ngFor="let item of data; let i=index;-">
    <span (click)="toggle(i)" style="cursor:pointer; font-size: 13px;">
      <i class="pull-left float-xs-left" style="font-size:13px; padding-right:5px; padding-top:3px; cursor:pointer;" [ngClass]="{'fa icon-minus': selectedIndex==i, 'fa icon-plus': selectedIndex!=i}"></i>
            {{item.id}} &nbsp; {{item.name}}
    </span>          
  </li>
</ul>

和打字稿组件文件将是这样。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-log',
  templateUrl: './log.component.html',
  styleUrls: ['./log.component.css']
})
export class LogComponent implements OnInit {
  public selectedIndex: number;
  public data = [
    {
      id: 1,
      name: '073801',
      children: [
        { id: 2, name: '04-25' },
        { id: 3, name: '25' },
        { id: 4, name: '25' },
      ]
    },
    {
      id: 2,
      name: '05602',
      children: [
        { id: 6, name: '04-25' },
        { id: 7, name: '04-25' }
      ]
    }
  ];



  constructor() { }

  ngOnInit() {
  }

  toggle(index: number) {
    this.selectedIndex = index;
  }

}

基本上，我想保持打开状态，直到您不切换它为止。我们可以同时打开多个节点。

请对此进行指导。谢谢

Answer 1

您可以执行类似的操作。我知道这有点脏，但是您会明白的。您还可以在对象内插入selected键，并将其设置为true或false。

.ts

public selectedIndex: number[] = [];
public data = [
  {
    id: 1,
    name: '073801',
    children: [
      {
        id: 2,
        name: '04-25'
      },
      {
        id: 3,
        name: '25'
      },
      {
        id: 4,
        name: '25'
      }
    ]
  },
  {
    id: 2,
    name: '05602',
    children: [
      {
        id: 6,
        name: '04-25'
      },
      {
        id: 7,
        name: '04-25'
      }
    ]
  }
];

toggle(index: number) {
  if (!this.isToggled(index)) {
    this.selectedIndex.push(index);
  } else {
    this.selectedIndex.splice(this.selectedIndex.indexOf(index), 1);
  }
}

isToggled(index: number): boolean {
  return this.selectedIndex.indexOf(index) !== -1;
}

.html

<ul>
  <li *ngFor="let item of data; let i = index">
    <span (click)="toggle(i)" style="cursor:pointer; font-size: 13px;"
      >
      <i
        class="pull-left float-xs-left"
        style="font-size:13px; padding-right:5px; padding-top:3px; cursor:pointer;"
        [ngClass]="{ 'fa icon-minus': selectedIndex == i, 'fa icon-plus': selectedIndex != i }"
      ></i>
      {{ item.id }} &nbsp; {{ item.name }}
      <ng-container *ngIf="isToggled(i)">
        <li *ngFor="let child of item.children">
          <span style="font-size: 13px;"> {{ child.id }} &nbsp; {{ child.name }} </span>
        </li>
      </ng-container>
    </span>
  </li>
</ul>

Answer 2

您可以为isOpen数组的每个元素保留一个data属性，以跟踪该元素是否打开/关闭。仅在父级ul为isOpen的情况下，也显示子级true。

<ul class="list-unstyled">
    <li *ngFor="let item of data; let i=index;">
        <span (click)="toggle(item)" style="cursor:pointer; font-size: 13px;">
            <i class="fa" [ngClass]="{'fa-minus': item.isOpen, 'fa-plus': !item.isOpen}"></i>
            {{item.id}} &nbsp; {{item.name}}
        </span>
        <ul *ngIf="item.isOpen">
            <li *ngFor="let child of item.children; let i2=index;">
                    {{child.id}} &nbsp; {{child.name}}
            </li>
        </ul>
    </li>
</ul>

然后使用切换功能切换isOpen的值

  toggle(item:any) {
    item.isOpen = !item.isOpen;    
  }

请参阅有效的堆栈here

Answer 3

您可以创建一个布尔数组，将其称为states，在其中存储切换的状态，然后您的toggle(i)方法将对states[i]进行NOT操作，然后在*ngFor中，对于第i个元素，请检查states[i]的值，并根据此值来决定是否将其切换。
如果不清楚，请告诉我。

如何使用Angular中的单个切换按钮保持打开多个树列表

3 个答案: