Визуализация div, которые соответствуют параметрам массива

Question

У меня есть проблема с параметрами рендеринга в Angular 8, я получаю данные от API, которые мне нужно отобразить в div, которые соответствуют этим данным, но у меня есть проблема, когда данные отображаются в каждые divs, вот как это выглядит:

Здесь "Drops", "Mis c", "Network" - это основные div, которые нужно рендерить нижние категории. Хотелось бы, например, чтобы у меня был только «Алюминий капель» внутри main «Капли», только «ВАННА» внутри «Мис c» и «Главный» в «Сети». Нижние категории должны отображаться только тогда, когда у них есть свои идентификаторы внутри main id (см. Рисунок 2 ниже).

Что я пробовал:

Связывание значений внутри div, поскольку все основные и нижние категории имеют идентификаторы, подобные следующим:

Вот пример стекаблика: https://stackblitz.com/edit/angular-me2ppb?file=src%2Fapp%2Fapp.component.ts

Заранее спасибо за ваше время и помощь, это очень ценится!

Answer 1

У вас есть 2 варианта:

1. Адаптируйте HTML к l oop вокруг total_by_level и запросите label_name соответственно

2. Построить вывод в коде

Похоже, вы пытались оба, и поэтому открыты для любого из них. Лично я предпочитаю делать как можно больше в коде и сохранять HTML настолько тупым, насколько это возможно, поэтому я бы выбрал подход 2.

In ngOnInit() (который должен быть там, где вы делаете любые начальные обработки), я бы построил массив на основе структуры на total_by_level.

output: any[];

ngOnInit() {    
  this.output = Object.keys(this.total_by_level).map(levelKey => {
    const child = this.total_by_level[levelKey];

    return {
      level: {
        label: this.label_name[levelKey]          
      },
      children: Object.keys(child).map(childKey => ({
        label: this.label_name[childKey],
        value: child[childKey]
      }))
    };
  });
}

Тогда становится просто привязать этот массив в вашем HTML:

<div *ngFor="let item of output">
  {{item.level.label}}
  <div *ngFor="let child of item.children">
    {{child.label}}
    {{child.value}}
  </div>
</div>

Вы имеете дело с некоторыми странными структурами данных, и я не уверен в вашей терминологии, поэтому я немного догадался здесь. Вы можете взять концепцию этой идеи и работать с ней. Я также предполагаю, что в total_by_level.

ДЕМО: https://stackblitz.com/edit/angular-upqdex

есть только один вложенный ребенок.

Answer 2

Если я правильно понимаю, не могли бы вы решить эту проблему с помощью вложенной буквы l oop в шаблоне?

<div *ngFor="let main of total_by_level | keyvalue">
    {{label_name[main.key]}}
    <div *ngFor="let sub of main.value | keyvalue">
        {{label_name[sub.key]}}
    </div>
</div>

Это приведет к:

Network
Main
Drops
Drops Aluminium
Misc
VANNE