Comment utiliser Grouper un ensemble de divs / éléments Web dans un div?

Question

J'essaye de mettre en place une fonctionnalité de groupe / dégrouper comme Word / Excel (pour sélectionner l'image). Mais le problème se pose lors du regroupement des éléments dans le ngForList . L'image ci-dessous (nouveau design) montre la sortie nécessaire, après la sélection des cartes / divs

Voici ce que j'ai essayé de reproduire avec le lien Stackblitz ci-dessous: https://stackblitz.com/edit/group?file=app%2Fapp.component.html

Voici, dans cet exemple, ce dont nous avons besoin:

1. Trier par ID / ou toute autre colonne (qui échoue lors du regroupement)

2. Regrouper les cartes (ce qui fonctionne)

Ce dont j'ai besoin, c'est le terrain égal à undefined en tant que cartes ordonnées. Voir image 2 Ou

Toute logique de sélection des divs, regroupez ces divs sélectionnés dans une liste.

Veuillez m'aider avec des suggestions, des documents et d'autres exemples de démonstration.

Answer 1

Vous avez 3 groupes: Groupe A, Groupe B et undefined. Le troisième groupe undefinedexiste, car dans votre arrayin, app.component.tsvous n'en avez défini aucun grouppour les éléments 3et 6.

Avec ce qui suit array(in app.component.ts) cela devrait fonctionner:

array = [
    {
      "id": 1,
      "name": "item 1",
      "group": "Group A"
    },
    {
      "id": 2,
      "name": "item 2",
      "group": "Group A"
    },
    {
      "id": 3,
      "name": "item 3",
      "group": "Group A" // <-- this changed
    },
    {
      "id": 4,
      "name": "item 4",
      "group": "Group B"
    },
    {
      "id": 5,
      "name": "item 5",
      "group": "Group B"
    },
    {
      "id": 6,
      "name": "item 6",
      "group": "Group B" // <-- this changed
    }
  ];

J'ai décommenté et édité le grouppour les éléments 3 et 6.

MODIFIER / ADDENDA :

Si vous voulez que vos objets soient toujours dans l'ordre (1-6) mais que vous les regroupez, vous pouvez faire ce qui suit (voir aussi stackblitz mis à jour ):

ngOnInit(){
    this.result = [];
    var currentGroup = ''; // <-- updated this line
    this.array.forEach(item => {
      if (item.group != currentGroup) {
        currentGroup = item.group;
        this.result.push({
          name: item.group,
          values: [],
        });
      }
      this.result[this.result.length - 1].values.push(item);
    });
  }