我使用了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>