0

我有一个用户界面，最初用户必须检查一些复选框。复选框具有顺序 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：

组件.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 我直接从文件夹中导入 JSON 文件src/assets/并将其保存id到 aSet中，以避免在用户选择复选框时出现重复值。

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

这里最深入的孩子有以下键值对：

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

否则“值”为空。

我希望将这些Set值与上述递归 JSON进行比较，如果匹配label_ids中的一个或多个值，则将值更改为label_idsSetcheckedtrue

如何在 Typescript/Angular 中实现这一点？

4

1 回答 1

0

我通过创建一个采用 JSON 结构的递归解析函数来解决它。

  1. 在ngOnInit()我调用服务并将其传递给parseTree函数
  2. 我递归解析它并将值与Set
  3. 我在结构中添加了额外的信息，比如 Font-Awesome 类文本value来呈现它
  4. 将更新后的 JSON 传递给相应的items变量

组件.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示例，我itemTemplate在代码中使用并在选择旁边添加 Font-Awesome 字体，如下所示：

组件.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 类来操作字体的颜色变化：

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

StackBlitz 示例代码

于 2019-05-09T19:01:37.960 回答