1 Câu hỏi: Kiểm tra cấu trúc JSON đệ quy cho các giá trị số trùng khớp trong Set in Angularcriptular

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi có một giao diện người dùng trong đó ban đầu Người dùng phải kiểm tra một số hộp kiểm. Các hộp kiểm có ID tuần tự. Cấu trúc JSON cho nó như sau:

{
  "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
    }
    ]
  }
]
}

Tôi hiển thị nó Angular bằng Mã sau:

thành phần.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>

thành phần.ts Tôi nhập trực tiếp tệp JSON từ thư mục src/assets/ và lưu id vào Set để tránh các giá trị trùng lặp khi người dùng chọn hộp kiểm.

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);
  }
}

Tôi đang sử dụng ngx-treeview để hiển thị chế độ xem dạng cây cho tệp JSON cố định có cấu trúc sau: Ở đây, những đứa trẻ ở độ sâu nhất có cặp khóa-giá trị sau:

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

khác "giá trị" là null.

Tôi muốn so sánh các giá trị Set với các giá trị đệ quy đã đề cập ở trên label_ids và nếu một hoặc nhiều hơn một giá trị trong label_ids với giá trị của 0600350991111110101

Làm thế nào để một người hoàn thành việc này trong Bản in /Góc?

    
0
  1. Set của bạn không hợp lệ.
    2019-05-08 16: 07: 08Z
  2. @ TheHeadRush có truy vấn được cập nhật với Github Gist
    2019-05-08 16: 15: 22Z
1 Câu trả lời                              1                         

Tôi đã giải quyết nó bằng cách tạo Hàm phân tích đệ quy có trong Cấu trúc JSON.

  1. Trong vòng checked Tôi gọi dịch vụ và chuyển nó đến chức năng true
  2. Tôi phân tích đệ quy nó và so sánh các giá trị với json
  3. Tôi thêm thông tin bổ sung như văn bản lớp Font-Awesome trong cấu trúc ngOnInit() để hiển thị nó
  4. chuyển JSON được cập nhật cho biến parseTree tương ứng

thành phần.ts :

Set

ở đây valueitems và trong vòng

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;

}
Tôi đặt giá trị cố định: selections

Dựa trên Mã ví dụ StackBlitz

    
0
2019-05-15 17: 14: 10Z
ngx-treeview
nguồn đặt đây