如何在div中使用一组div/web元素组? [英] How to use Group a set of divs/web elements inside a div?

问题描述

我正在尝试设置Word/Excel之类的分组/取消分组"功能(用于选择图像).但是问题是在 ngForList中的元素分组期间出现的.下图(新设计)显示了选择Cards/div后所需的输出

I am trying to set up a Group/Ungroup functionality like Word/Excel (for selecting image). But the problem arises during the grouping of the elements within the ngForList. The below image(New Design) shows the output needed, after the selection of the Cards/divs

以下是我尝试用Stackblitz链接复制的内容: https://stackblitz.com/edit/group?file=app%2Fapp.component.html

Here what I have tried is tried to reproduced with below Stackblitz link : https://stackblitz.com/edit/group?file=app%2Fapp.component.html

在该示例中，我们需要的是:

Here in that example what we need is :

1. 按ID/或其他任何列排序(在分组过程中失败)

1. Order by Id/ or any other columns (which fails during the grouping)

将卡分组(正在工作)

我需要的是等于未定义为有序卡的地面.见图2 或者

What I need is the ground equal to undefined as ordered cards. See image 2 Or

任何用于选择div的逻辑，将选定的div分组在一个列表中.

Any logic for selecting the divs, group those selected divs, in a list.

请帮助我提供建议，文档和更多示例演示.

Please help me with suggestions, documents and further example demos.

推荐答案

您有3个组:A组，B组和undefined.存在第三组undefined，因为在app.component.ts中的array中，您没有为项目3和6设置任何group.

You have 3 groups: Group A, Group B and undefined. The third group undefined exists, because in your array in app.component.ts you did not set any group for the items 3 and 6.

使用以下array(在app.component.ts中)应该可以正常工作:

With the following array (in app.component.ts) it should work:

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

我取消注释并编辑了项目3和6的group.

I uncommented and edited the group for the items 3 and 6.

编辑/添加:

如果您希望您的商品保持顺序(1-6)，但仍将它们分组，则可以执行以下操作(另请参见更新了堆叠闪电战):

If you want your items to still be in order (1-6) but still group them, you may do the following (see also updated stackblitz):

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

这篇关于如何在div中使用一组div/web元素组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！