Как создать упорядоченный список, используя angular?

Question

Обычно создание упорядоченного списка довольно просто, но я пытаюсь сделать это в angular при использовании директивы * ngFor. Следующий код работает как талисман, за исключением того факта, что он просто говорит номер 1 рядом с каждым упорядоченным элементом списка в моем результирующем массиве, а не нумерует их последовательно. Я хотел бы убедиться, что каждый элемент пронумерован правильно ie (1 2 3 4 et c .. вместо 1 1 1 1). Как мне этого добиться?

<div *ngFor="let item of result; let i=index"> <ol> <li *ngIf="i<3"> {{item.key}} appears {{item.value}} {{(item.value>1)? 'times' : 'time'}} </li> </ol> </div><br> //currently outputs 1.bacon appears 3 times 1.pepperoni appears 3 times 1.beef appears 2 times

Answer 1

Проблема в том, что вы зацикливаетесь вокруг root <div>, поэтому вы фактически генерируете 3 <ol> вместо 3 <li> внутри одного <ol>. Вам нужно l oop вокруг <li>, но поскольку у вас не может быть ngFor и ngIf на одном и том же элементе, вам нужно использовать <ng-container>. Как то так:

<div >
  <ol>
   <ng-container *ngFor="let item of result; let i=index">
      <li *ngIf="i < 3">{{item.key}} appears {{item.value}} {{(item.value>1)? 'times' : 'time'}}</li>
   </ng-container>    
  </ol>
</div>