Angular 2+交互式规则表

Question

我在Angular 5的交互式规则表上工作，在开发过程中遇到了以下UI设计问题，这几乎花了我数百个小时。我想我目前的算法方法不是最好的方法，希望能对您有所帮助。 接下来，我想草拟一些行为。

Web View

在这里您可以看到5个按钮，

1. 组
2. 取消分组
3. 拆分
4. 减号（左圆）
5. 添加（右一）

对于每一行，它是一个对象：

 "CRITERIA": (string),
 "GROUP": {
     "GROUPNO": (int),
     "ELEMENT": (int),
 },
 "SUBGROUP": {
     "GROUPNO": (int),
     "ELEMENT": (int),
 }

我通过绑定上述对象的数组来处理加/减函数来存储行。

“分组”按钮有两种情况：

• 当附近的两行不在同一组中时，例如A和B，A属于第1组，B属于第2组，分组后即为（A和B）
• 当附近的两行位于同一组中时，例如（A和B）和（C和D）=>按下B和C之间的分组=>（A和B以及C和D），分组规则将变成分组行，如下所示：

Grouped Rows/Rules

取消分组按钮只有一种情况：

• 将附近的两行分组时，例如（A和B和C）=>在A和B之间按取消分组按钮=>（A和（B和C），表格将变为此。p.s.边框应包装不分开。

Ungroup Rows/Rules

“拆分”按钮只有一种情况：

• 对附近的两行进行分组但不属于同一子组时，例如（A和（B和C），拆分按钮仅出现在A和B行之间，而取消分组按钮出现在B和C之间。=>单击取消分组按钮将成为=> A和（B和C）

除第一行外，每行/规则上都可以显示减号按钮：

• 单击减号按钮时，它将删除该行，但是根据不同的情况，它具有不同的结果，例如A和（B和C），将B去除会导致A和C； （A，B和C），则B的去除将导致（A和C）等

添加按钮可以显示在每行/每个规则上

• 单击添加按钮时，如果当前行位于子组下，则会在当前行下添加新行，例如（A和（B和C）），将B插入（A和（B和C和D））;如果当前行是在组下还是在单独下，例如A，将A插入（A和B）

我当前的方法是使用[ngClass]将样式绑定到元素和提到的对象以控制类的返回，但是代码确实很凌乱且难以追踪，是否有任何方法/算法需要解决？办法？ 谢谢！