禁用Treeview组件中的项目

时间:2019-05-07 08:53:03

标签: angular ngx-treeview

我使用了angular 7和ngx-treeview。 如果要验证某些条件,我想禁用treeview组件中的项目。

我在从父节点到子节点读取json数据时遇到问题

我有这种格式的json数据。

[
    {
        "text": "test 1",
        "value": "1",
        "nbr": "1",
        "children": [
            {
                "text": "test 1_1",
                "value": "1_1",
                "nbr": "2",
                "children": [
                    {
                        "text": "test 1_1_1",
                        "value": "1_1_1",
                        "nbr": "1",
                        "children": []
                    },
                    {
                        "text": "test 1_1_2"",
                        "value": "1_1_2",
                        "nbr": "0",
                        "children": []
                    },
                    {
                        "text": "test 1_1_3"",
                        "value": "1_1_3",
                        "nbr": "0",
                        "children": []
                    },
                    {
                        "text": "test 1_1_4"",
                        "value": "1_1_4",
                        "nbr": "0",
                        "children": []
                    }
                ]
            },
            {
                "text": "test 1_2",
                "value": "1_2",
                "nbr": "0",
                "children": []
            }
        ]
    },
    {
        "text": "test 2",
        "value": "2",
        "nbr": "0",
        "children": []
    }
]

我想循环json数据并在验证条件后禁用项目。

我的问题是如何循环json数据。

我尝试使用以下代码:

 let bookObjects = new Array();
        this.testService.query({

      }).subscribe((res: HttpResponse<TestEntity[]>) => {
        this.temp= res.body;

        this.temp.forEach((x) => {


          if(x.nbr=='0')
            {
                x.disabled = true;
            }

            x["children"].forEach(x => {
                if(x.nbr=='0')
                {
                    x.disabled = true;
                }
                x["children"].forEach(x => {
                    if(x.nbr=='0')
                    {
                        x.disabled = true;
                    }

                    })
                })


            bookObjects.push(new TreeviewItem(x));
            });


      });

这是我的html文件:

<ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
      <div class="form-inline row-item">

        <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
          [class.fa-caret-down]="!item.collapsed"></i>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [disabled]="item.disabled"
            [indeterminate]="item.indeterminate" />
          <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">
            {{item.text}}
          </label>

        </div>
      </div>
    </ng-template>

    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <div class="d-inline-block">
            <ngx-treeview [items]="items" [itemTemplate]="itemTemplate" (selectedChange)="onSelectedChange($event)">
            </ngx-treeview>
          </div>
        </div>
      </div>

    </div>

0 个答案:

没有答案