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

Question

Я ищу приведенный ниже результат с вложенным JSON. Я не могу получить / вызвать ключи и значения в шаблоне динамически. Ссылка на ссылку прикреплена для подробного просмотра

Угловой код

let checklist = {
"CS": [
  {
    "id": "1",
    "name": "A"
  },
  {
    "id": "2",
    "name": "B"
  },
  {
    "id": "3",
    "name": "C"
  }
],
"Comment": [
  {
    "id": "1",
    "name": "D"
  },
  {
    "id": "2",
    "name": "E"
  },
  {
    "id": "3",
    "name": "F"
  }
]
}


<div *ngFor="let item of Checklist | Key">
      {{key}}
 <div>{{item}}</div>
 </div>

Желаемый результат

Answer 1

Используйте keyvalue pipe для зацикливания объектов в шаблоне. Используйте css для изменения отображения, но код, подобный приведенному ниже, удовлетворит ваши потребности.

<div *ngFor="let item of checklist | keyvalue">
  <div>
    {{item.key}}
  </div>
  <div>
    <p *ngFor="let eachValue of item.value">
      {{eachValue.name}}
    </p>
  </div>   
</div>

https://stackblitz.com/edit/angular-jgwk8n?file=src%2Fapp%2Fapp.component.html

Редактировать

Для угловой версии <6, <code>keyvalue труба не существует. Вы можете создать свой собственный канал, например:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customKeyvalue',
  pure: true     // keyvalue pipe is actually impure, which means this value would be false
})
export class CustomKeyvaluePipe implements PipeTransform {

  transform(inputOb: any): any {
    let returnVal = [];
    for (let eachKey in inputOb) {
      returnVal.push({key: eachKey, value: inputOb[eachKey]})
    }
    return returnVal
  }

}

Теперь в случае, если ваш Объект изменяется динамически, не меняя исходную ссылку, вам нужно сделать вышеуказанный канал как impure (pure: false). Это имеет обратную сторону при каждом обнаружении изменений.

https://stackblitz.com/edit/angular-jgwk8n?file=src%2Fapp%2Fapp.component.html

Answer 2

Вы можете использовать Object.keys для получения ключей объекта.

---

Это ваш компонент:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public checklist: any;
  public ObjectKeys =  Object.keys;
  name = 'Angular';

    ngOnInit() {

        this.checklist = {
        "CS": [
          {
            "id": "1",
            "name": "A"
          },
          {
            "id": "2",
            "name": "B"
          },
          {
            "id": "3",
            "name": "C"
          }
        ],
        "Comment": [
          {
            "id": "1",
            "name": "D"
          },
          {
            "id": "2",
            "name": "E"
          },
          {
            "id": "3",
            "name": "F"
          }
        ]
      };
    }
}

---

Это HTML:

<table border="1">
    <tbody>
        <tr *ngFor="let key of ObjectKeys(checklist)">
            <td colspan="2" style="border-right-style: solid; border-width: 1px;"> 
              {{ key }}
            </td>
            <td>
        <div *ngFor = "let entry of checklist[key]">
          {{ entry.name }}
        </div>
            </td>
        </tr>
    </tbody>
</table>

---

Это результат:

Вы можете добавить CSS, чтобы он выглядел лучше, но теперь вы получаете суть:)

Это ссылка StackBlitz , которую вы можете редактировать.

Answer 3

Хитрость здесь в том, чтобы использовать display: inline-block и vertical-align: top.

Это похоже на пример xyz.

<div *ngFor="let item of checklist | keyvalue" >
  <div style="display:inline-block;">
    {{item.key}}
  </div>
  <div style="display:inline-block;vertical-align: top;">
    <div *ngFor="let eachValue of item.value" >
      {{eachValue.name}}
    </div>  
  </div>   
</div>

Пример: https://angular -hzuexu.stackblitz.io