检查递归 JSON 结构以匹配 Set in Typescript Angular 中的数值

Question

我有一个 UI，最初用户必须选中一些复选框。复选框具有顺序 ID。它的JSON结构如下：

{
  "categories": [{
    "name": "Product",
    "labels": [{
      "id": 1,
      "name": "I work on an asset (capital good).",
      "checked": false
    }, {
      "id": 2,
      "name": "I work on a consumer product.",
      "checked": false
    }, {
      "id": 3,
      "name": "I am not sure what type of product I work on.",
      "checked": false
    }
    ]
  }, {
    "name": "Goal",
    "labels": [{
      "id": 4,
      "name": "I want to improve the product's reliability.",
      "checked": false
    }, {
      "id": 5,
      "name": "I need information to identify root causes.",
      "checked": false
    }, {
      "id": 6,
      "name": "I need information about the product's environment.",
      "checked": false
    }, {
      "id": 7,
      "name": "I need information about customer requirements.",
      "checked": false
    }, {
      "id": 8,
      "name": "I need quantified information.",
      "checked": false
    }, {
      "id": 9,
      "name": "I am not sure what I need.",
      "checked": false
    }
    ]
  }
]
}

我使用以下代码渲染它 Angular：

component.html

<div class="row mt-lg-auto" *ngFor="let filter of filters['categories']">
    <div class="col-lg-12">
      <h4>
        {{filter['name']}}
      </h4>
      <div *ngFor="let label of filter['labels']">
          <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   value="{{label['id']}}"
                   id="{{label['id']}}"
                   [(ngModel)]="label['checked']"
                   (change)="changeCheck(label['id'], $event)"
            >
              <label class="form-check-label" for="{{label['id']}}">
                {{label['name']}}
              </label>
          </div>
      </div>
    </div>
  </div>

component.ts 我直接从 src/assets/ 文件夹导入 JSON 文件并将 id 保存到 Set 以避免用户选择复选框时出现重复值。

import { Component, OnInit } from '@angular/core';
import * as FilterFunc from 'src/assets/FilterFunction.json';

const Filters: any = FilterFunc;

@Component({
  selector: 'explore-step1',
  templateUrl: './explore-step1.component.html',
  styleUrls: ['./explore-step1.component.css']
})
export class ExploreStep1Component implements OnInit {
  filters = Filters.default;
  selections = new Set();

  constructor() {
  }
  ngOnInit(): void {
  }
  changeCheck(id: number, event: any) {
    (event.target.checked) ?
      this.selections.add(id):
      this.selections.delete(id);
    console.log(this.selections);
  }
}

我正在使用 ngx-treeview 为具有以下结构的固定 JSON 文件呈现树视图： GitHub Gist of the Complete Recursive JSON

在最深处的 children 上有以下 key-value 对：

"value": {
     "label_ids": [relevant ids from the first json],
     "description": "some text to render"
}

否则 "value" 为空。

我希望将 Set 值与上述递归 JSON 的 label_ids 进行比较，如果 label_ids 中的一个或多个值与Set 然后将 checked 值更改为 true

如何在 Typescript/Angular 中做到这一点？

Answer 1

我通过创建一个采用 JSON 结构的递归解析函数解决了这个问题。

在 ngOnInit() 中，我调用该服务并将其传递给 parseTree 函数
我递归地解析它并将值与 Set
我在 value 结构中添加其他信息，例如 Font-Awesome class 文本以呈现它
将更新后的 JSON 传递给相应的 items 变量

component.ts:

parseTree(factors: TreeviewItem[]) {
factors.forEach(factor => {
  // console.log(factor);
  if (!isNil(factor.value)) {
    let labels: number[] = factor.value['label_ids'];
    labels.forEach(label => {
      if(this.selected.findIndex(l => l == label) > -1) {
        factor.value['highlighted'] = true;
        factor.value['class'] = 'fas fa-flag';
      }
    });
  }
  if (!isNil(factor.children)) {
    this.parseTree(factor.children);
  }

});
this.items = factors;

}

这里 selections 是一个 Set 并且在 ngOnInit() 内我设置了一个固定值：

ngOnInit() {
    this.selections.add(15);
    this.items = this.parseTree(this.service.getDataQualityFactors());
  }

基于ngx-treeview example我在代码中使用itemTemplate并在选择旁边添加Font-Awesome字体如下：

component.html

 <label class="form-check-label" *ngIf="item.value !== null && item.value['highlighted']">
        <i class="{{item.value['class']}}" aria-hidden="true" title="Highlighted" [ngClass]="{'marked': item.checked}"></i>
      </label>

并使用CSS classes来操作字体的颜色变化：

.fa-flag {
  color: red;
}
.fa-flag.marked {
  color: green;
}

StackBlitz Example Code

检查递归 JSON 结构以匹配 Set in Typescript Angular 中的数值

Check a recursive JSON structure for matchinig numerical values in Set in Typescript Angular

json

typescript

angular

ngx-treeview