如何使用角度创建有序列表？

Question

通常创建一个有序列表很简单，但是我尝试在使用* ngFor指令时以有角度的方式进行。下面的代码就像一个符咒一样工作，除了它只是说我的结果数组中每个有序列表项旁边的数字1而不是对它们进行顺序编号。我想确保每个项目都正确编号，即（1 2 3 4等。而不是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> 
//currently outputs 
1.bacon appears 3 times
1.pepperoni appears 3 times
1.beef appears 2 times

Answer 1

问题是，您在根<div>上循环，因此实际上是在一个<ol>中生成3 <li>而不是3 <ol>。您需要循环<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>