1 Вопрос: Проверьте рекурсивную структуру JSON на соответствие числовых значений в наборе в Typescript Angular

вопрос создан в Wed, May 8, 2019 12:00 AM

У меня есть пользовательский интерфейс, где изначально пользователь должен установить некоторые флажки. Флажки имеют последовательные идентификаторы. Структура 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 Я напрямую импортирую файл JSON из папки src/assets/ и сохраняю 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 из полного рекурсивного JSON

Здесь у детей в самой глубине есть следующая пара ключ-значение:

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

иначе "значение" является нулевым.

Я хочу сравнить значения Set с вышеупомянутыми рекурсивными значениями JSON label_ids и, если одно или несколько значений в label_ids совпадают с Set, изменить значение 060035099111100101035099 на 1100100035062 на значение p checked

Как это сделать в Typescript /Angular?

    
0
  1. Ваш true недействителен.
    2019-05-08 16: 07: 08Z
  2. @ TheHeadRush обновил запрос с помощью Github Gist
    2019-05-08 16: 15: 22Z
1 ответ                              1                         

Я решил это, создав функцию разбора рекурсии, которая принимает структуру JSON.

  1. В json я вызываю службу и передаю ее в функцию ngOnInit()
  2. Я рекурсивно разбираю его и сравниваю значения с parseTree
  3. Я добавляю дополнительную информацию, например текст класса Font-Awesome, в структуру Set, чтобы отобразить ее
  4. передайте обновленный JSON в соответствующую переменную value

component.ts

items

здесь

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 в коде и добавляю Font-Awesome шрифты рядом с вариантами выбора следующим образом:

component.html

itemTemplate

и используйте классы CSS для управления изменением цвета шрифта:

 <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>

Пример кода StackBlitz

    
0
2019-05-15 17: 14: 10Z
.fa-flag {
  color: red;
}
.fa-flag.marked {
  color: green;
}
источник размещен Вот