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 を参照) 一致にヒットすると、そのアイテムのレンダリングに失敗し、キャレットをクリックすると折りたたみ可能なセクションが子アイテムを複製するバグが発生します。 .

インスタンスが 1 つしかない場合、JSON を送信する API が配列に子を配置しない場合、これを修正する方法がわかりません。再帰は、子が 1 つだけ存在する (配列内にない) インスタンスを考慮する必要があります。

4

3 に答える 3

4

Raja Modamed の入力と、再帰ビットにもう 1 つのチェックを追加して、配列なしで子にアクセスできないようにすることで解決できました (これにより、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 に答える