1
votes

Comment garder ouverte plusieurs listes d'arbres à l'aide d'un seul bouton bascule dans Angular

Je veux créer ma liste d'arborescence personnalisée en utilisant UL et LI avec le bouton PLUS / MOINS. La structure serait comme suit:

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;
  }

}

1 et 2 garderont l'icône PLUS et lorsque nous cliquons sur quelqu'un, une icône respective se convertira en MOINS. Je veux utiliser une seule méthode de bascule ici. C'est parce qu'un arbre a n nombre de données.

Je suis capable de créer cette structure mais je ne peux pas implémenter un bouton bascule unique pour tous les nœuds pour basculer.

<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>

typescript angular

0 commentaires

3 Réponses :

0
votes

Vous pouvez créer un tableau de booléens, appelons-le states , vous y stockez l'état des bascules, et votre méthode toggle (i) fera juste un PAS d'opération sur les états [i] et à l'intérieur de votre * ngFor , pour le i'ème élément, vous vérifiez la valeur de states [i] et en fonction de cela, vous le faites basculer ou non.
Si ce n'est pas clair, faites-le moi savoir.

0 commentaires

1
votes

Vous pouvez faire quelque chose comme ça. Je sais que c'est un peu sale, mais vous aurez une idée. Vous pouvez également insérer une clé selected dans votre objet et la définir sur true ou false.

.ts strong >

<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>

.html

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;
}

0 commentaires

2
votes

Vous pouvez conserver une propriété isOpen avec chaque élément de votre tableau data pour savoir si l'élément est ouvert / fermé. Afficher également l'enfant ul uniquement si le parent isOpen est true.

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

Ensuite, utilisez la fonction bascule pour basculer la valeur de isOpen

<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>

Voir le stackblitz de travail ici

0 commentaires