4

我已经开始使用 Clarity Design Angular 项目，并且遇到了 0.10.0-alpha 中提供的树视图递归模板的问题。

https://plnkr.co/edit/KK8rVH1xUGCO7VetgomA?p=preview

    selectableRoot = {
    "@name": "A1",
    "selected": false,
    "expanded": true,
    "children": [
        {
            "@name": "B1",
            "selected": false,
            "children": [
                { "@name": "C1" },
                { "@name": "C2" },
                { "@name": "C3" }
            ]
        },
        {
            "@name": "B2",
            "selected": true,
            "expanded": true,
            "children": [
                { "@name": "D1" },
                {
                    "@name": "D2",
                    "selected": false
                },
                { "@name": "D3" }
            ]
        },
        {
            "@name": "B3",
            "selected": true,
            "children": [
                { "@name": "E1" },
                { "@name": "E2" },
                { 
                  "@name": "E3",
                  "children":
                     { "@name": "F1" }
                }
            ]
        }
    ]
};

当递归检查遇到不包含数组（而只是一个对象 - 请参阅 A1 > B3 > E3 > F1）的匹配项时，它无法呈现该项目并导致一个错误，即任何可折叠部分在单击插入符号时都会复制子项目.

如果发送 JSON 的 API 在只有一个实例的情况下没有将子项放入数组中，则不确定如何解决此问题。递归应考虑仅存在一个孩子（并且不在数组中）的情况。

4

3 回答 3

4

我能够从 Raja Modamed 的输入中解决它，并在递归位上添加了一项检查以防止它在没有数组的情况下访问子项（这可以防止 ngFor 错误并将功能返回给切换）。

https://plnkr.co/edit/OAujF19FPDqaEWvFfgN1?p=preview

@Component({
selector: "recursive-selectable-structure",
template: `
    <clr-tree-node [(clrSelected)]="item.selected">
        {{item.name}}
        <span *ngIf="item.children?.length > 0">
          <ng-template 
            [clrIfExpanded]="item.expanded" 
            *ngFor="let child of item.children">
              <recursive-selectable-structure
                  [item]="child">
              </recursive-selectable-structure>
          </ng-template>
        </span>
        <ng-template *ngIf="item && item.children && !item.children[0]" [clrIfExpanded]="item.children.expanded">
          <recursive-selectable-structure [item]="item.children">
          </recursive-selectable-structure>
        </ng-template>
    </clr-tree-node>
`

})

于 2017-08-15T17:05:24.090 回答
1

在https://plnkr.co/edit/KK8rVH1xUGCO7VetgomA?p=preview中为对象案例添加一个条件递归 替换“recursive-selectable-structure”组件中的此代码

@Component({
selector: "recursive-selectable-structure",
template: `
    <clr-tree-node [(clrSelected)]="item.selected">
        {{item.name}}
        <recursive-selectable-structure *ngIf="item && item.children && !item.children[0]" [item]="item.children">

        </recursive-selectable-structure>
        <ng-template 
          [clrIfExpanded]="item.expanded" 
          *ngFor="let child of item.children">
            <recursive-selectable-structure
                [item]="child">
            </recursive-selectable-structure>
        </ng-template>
    </clr-tree-node>
`

})

更换并在同一个 plunker 中尝试这个案例

于 2017-08-13T08:39:06.027 回答
0

现在有一个清晰的解决方案。您可以使用清晰递归树

https://clarity.design/documentation/tree-view#recursive-tree

<clr-tree>
  <clr-tree-node *clrRecursiveFor="let item of items; getChildren: getItemChildren"
                                 [(clrSelected)]="item.selected">
        {{item.name}}
  </clr-tree-node>
</clr-tree>

您还需要在组件中定义一个函数来获取子组件

getItemChildren = (item) => item.children;
于 2019-07-09T17:30:58.367 回答