Angular2 ng如何计算循环值的数量？

2 回答

• 6

  Demo

  <ul>
    <li *ngFor="let item of items; let i = index">
      {{i}}. {{item}}
    </li>
  </ul>
  {{items ? items.length : ''}}
  

  您可以只打印items数组的长度 .

  回复于 2024-04-18T11:54:46+08:00
• 21

  迭代数组

  关于文档：https://angular.io/guide/structural-directives#inside-ngfor和https://angular.io/api/common/NgForOf

  假设你有一个iterable：

  let content = [
    "Content1",
    "Content2",
    "Content3",
    "Content4",
    "Content5",
    "Content6",
    "Content7",
    "Content8"
  ]
  

  然后你可以迭代和计数：

  <li *ngFor="let item of content; let i = index">
      {{i+1}} {{item}}
  </li>
  

  迭代对象属性

  如果要迭代对象而不是对象数组，请检查How to iterate object keys using *ngFor

  要记录，您需要一个自定义管道：

  @Pipe({ name: 'keys',  pure: false })
  export class KeysPipe implements PipeTransform {
      transform(value: any, args: any[] = null): any {
          return Object.keys(value)//.map(key => value[key]);
      }
  }
  

  那就是

  <li *ngFor="let key of objs | keys; let i = index"> ...
  

  更新

  从Angular 6.1，您可以使用本机 KeyValuePipe .

  https://blog.angular.io/angular-v6-1-now-available-typescript-2-9-scroll-positioning-and-more-9f1c03007bb6#ff4b

  https://angular.io/api/common/KeyValuePipe

  作为记录：

  <li *ngFor="let item of data | keyvalue; let i = index">
    {{i+1}}. {{item.key}} - {{item.value}}
  </li>
  

  回复于 2024-04-18T11:54:46+08:00