как создать разборную / расширяемую / древовидную структуру со списком флажков, используя угловой 6 & bootstrap 3.3.7 - PullRequest
Новая
       30

как создать разборную / расширяемую / древовидную структуру со списком флажков, используя угловой 6 & bootstrap 3.3.7

0 голосов
/ 08 декабря 2018

здесь я пытаюсь создать структуру свертываемых / древовидных структур с флажком для родителя и детей, но я не смог создать ее точно, я смог создать ее до неупорядоченного списка из json 

{
  "properties": {
    "host": {
      "fields": {
        "keyword": {
          "ignore_above": 256,
          "type": "keyword"
        }
      },
      "type": "text",
      "fielddata": true
    },
    "information": {
      "properties": {
        "filetype": {
          "fields": {
            "keyword": {
              "ignore_above": 256,
              "type": "keyword"
            }
          },
          "type": "text",
          "fielddata": true
        },
        "author": {
          "fields": {
            "keyword": {
              "ignore_above": 256,
              "type": "keyword"
            }
          },
          "type": "text",
          "fielddata": true
        },
        "authorcountry": {
          "fields": {
            "keyword": {
              "ignore_above": 256,
              "type": "keyword"
            }
          },
          "type": "text",
          "fielddata": true
        }
      }
    },
    "url": {
      "fields": {
        "keyword": {
          "ignore_above": 256,
          "type": "keyword"
        }
      },
      "type": "text",
      "fielddata": true
    },
    "name": {
      "fields": {
        "keyword": {
          "ignore_above": 256,
          "type": "keyword"
        }
      },
      "type": "text",
      "fielddata": true
    },
    "instrument": {
      "properties": {
        "Style": {
          "fields": {
            "keyword": {
              "ignore_above": 256,
              "type": "keyword"
            }
          },
          "type": "text",
          "fielddata": true
        },
        "instrumentCode": {
          "type": "integer"
        },
        "instrumentName": {
          "type": "text"
        },
        "instrumentNumber": {
          "fields": {
            "keyword": {
              "ignore_above": 256,
              "type": "keyword"
            }
          },
          "type": "text",
          "fielddata": true
        }

      }
    }
  }
}

.html.код 

<button class="btn btn-primary" (click)="getData()">getData</button>


<h1>ul element</h1>

<hr>

 <ul class="list-group"   *ngFor="let x of inf | keyvalue">
    <li class="list-group-item">{{x.key}}</li>
    <ng-container *ngIf="x.value.hasOwnProperty('properties')">
      <ul *ngFor="let y of x.value.properties | keyvalue">
      <li>
        {{y.key}}
      </li>
      </ul>  
    </ng-container> 
  </ul>

складная / древовидная структура

ниже - моя стековая ссылка

https://stackblitz.com/edit/angular-k5tdpe

я также могу попробовать плагины, но формат входных данныхдля плагинов был другой плагин angular2-tree & ng2-tree / ngx-tree, поэтому любые предложения

tree structure

1 Ответ

0 голосов
/ 08 декабря 2018

просто добавьте проверку типа ввода и используйте [(ngModel)] 

<ul class="list-group"   *ngFor="let x of inf | keyvalue">
    <li class="list-group-item">
     <!--add a input type checkbox and relation with x.check-->
     <input type="checkbox" [(ngModel)]="x.check">
     {{x.key}}</li>
    <!---change the *ngIf to add the x.check condition-->
    <ng-container *ngIf="x.check && x.value.hasOwnProperty('properties')">
      <ul *ngFor="let y of x.value.properties | keyvalue">
      <li>
        {{y.key}}
      </li>
      </ul>  
    </ng-container> 
  </ul>

Обновлено , если вам нужен "рекурсивный компонент", это просто.Я привожу пример, вы можете увидеть результат в stackblitz

В основном "рекурсивный компонент - это компонент, который в шаблоне имеет тот же компонент. Обычно мы используем модель json со свойствами children (да, вы можете превратить ваш «сложный» json в тот, который имеет свойства children) Если однажды вы создадите jsondata с дочерними элементами, ваш json будет похож, например, на 

data = [{
    title: "uno", children: [
      { title: "uno-uno" }]
  },
  {
    title: "dos", children: [
      { title: "dos-uno",children: [
           { title: "dos-uno" }
           ]},
      { title: "dos-dos" }]
  }
  ]

У нас может быть приложение.компонент, такой как 

  <li *ngFor="let item of data">
     <app-li [title]="item.title" [children]="item.children"></app-li>
  </li>

И наш app-li, такой как 

<li (click)="check=!check">
      <div [className]="children?check?'arrow-down':'arrow-up':'arrow-right'"></div>
      {{title}}
</li>
<ul *ngIf="children && check">
  <ng-container *ngFor="let item of children">
       <app-li [title]="item.title" [children]="item.children"></app-li>
  </ng-container>
</ul>

Обратите внимание, что мы наполняем app-li "children"

ПРИМЕЧАНИЕ. Я добавляю

с className для «симуляции» треугольников

Обновлено 2 Мы можем передать собственный элемент itselft

Компонент становится как 

@Component({
  selector: 'app-li',
  template: `<li >
              <div (click)="check=!check" [className]="item.children?
                   check?'arrow-down':'arrow-up':'arrow-right'">
              </div>
              <input type="checkbox" [(ngModel)]="item.select" >
              <span (click)="check=!check">{{item.title}}</span>
              </li>
             <ul *ngIf="item.children && check">
             <ng-container *ngFor="let item of item.children">
               <app-li [item]="item" ></app-li>
               </ng-container>
             </ul>
  `,
    styleUrls: [ './hello.component.css' ]



})
export class HelloComponent  {
  @Input() item: any;
}

И приложение 

<li *ngFor="let item of data">
     <app-li [item]="item" ></app-li>
</li>

См. stackblitz раздвоенный

...