Угловая вложенность для циклов в шаблоне с глобальным индексом

Question

Мне нужно создать двухуровневый вложенный список в шаблоне Angular и индексировать элементы глобальным индексом или другими словами, индексируя в ширину.

Если щелкнуть элемент, он сможет вернуть индекс.

Схема:

• 0 Элемент списка
  • 2 Элемент списка
  • 3 Элемент списка
• 1 Элемент списка
  • 4 Элемент списка
  • 5 Элемент списка

Я пытаюсь пройти этот JSON (вы можете игнорировать корень):

    data: Data = {
        "name": "Exceptions",
        "color": "white",
        "children": [
            {
                "name": "New",
                "color": "peru",
                "children": [
                    {
                        "name": "Amount Break",
                        "size": 1,
                        "color": "deepskyblue"
                    },
                    {
                        "name": "Amount Break",
                        "size": 1,
                        "color": "dodgerblue"
                    }
                ]
            },
            {
                "name": "Active",
                "color": "chocolate",
                "children": [
                    {
                        "name": "Amount Break",
                        "size": 2,
                        "color": "deepskyblue"
                    },
                    {
                        "name": "Amount Break",
                        "size": 2,
                        "color": "dodgerblue"
                    }
                ]
            }
        ]
    }

Answer 1

Я думаю, что лучше использовать приращение CSS следующим образом. Это не то же самое, что вы хотите, но может работать для вас:

См. Пример

HTML:

<ul>
  <li *ngFor='let item of list'>    
    List item
    <ul>
      <li *ngFor='let child of list'>Child Item </li>
    </ul>
    </li>
</ul>

CSS:

ul {
  counter-reset: section;                
  list-style-type: none;
}
li::before {
  counter-increment: section;            
  content: counters(section, ".") " ";   
}

Answer 2

Доза что-то вроде этого соответствует вашим потребностям?

<ul *ngFor="let items of itemsLists; let i = index">
    <li *ngFor="let item of items; let j = index" (click)="logIndex(j)"></li>
</ul>