如何使用 angular 创建有序列表？

Question

通常创建有序列表非常简单，但我试图在 angular 中使用 *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}} 出现 {{item.value}} {{(item.value>1)？ 'times' : 'time'}} </li> </ol> </div><br> //当前输出 1.bacon出现3次 1.pepperoni出现3次 1.beef出现2次

Answer 1

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

如何使用 angular 创建有序列表？

How do I create an ordered list using angular?

angular

arraylist

html-lists

ngfor