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

我使用ngFor循环8个json对象，我不仅要循环值，还要计算循环值的数量并显示数字

比如说,， 如果json值为

Content:{
0:"Content1",
1:"Content2",
2:"Content3",
3:"Content4",
4:"Content5",
5:"Content6",
6:"Content7",
7:"Content8"
}

我不仅想显示“Content”的循环值，还想对它们进行计数，结果如下所示

1 <- counting
Content1

2
Content2

3
Content3

4
Content4

5
Content5

6
Content6

7
Content7

8
Content8

1在数组上迭代
关于文件：
和

假设您有一个iterable：

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

然后，您可以使用以下方法进行迭代和计数：

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

那就是

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




{{i}。{{item}}


{{items？items.length:'}}

您可以只打印items数组的长度。
我同意上述答案，但我想提供创建动态内容的详细信息最好在组件中创建逻辑，请参见下面的代码：
我想在一个分区中显示6个项目，在另一个分区中显示其余项目

组件1.ts：

  getMyTasksDueToday(url,duedate){
console.log(this.currentDate);
this.dashboardservices.getGroupedTasksByDueDate(url,duedate).subscribe(
  (modelData: ITasks[]) => {
    //console.log(modelData);
    this._myTasksDueToday = modelData;
    let arr1 = [];
    let arr2 = [];
    let i = 1;
    modelData.forEach((item)=>{
      //console.log(item);
      if(i<=6){
        arr1.push(item);
      }else{
        this._myTasksDueToday_hasPart2 = true;
        arr2.push(item);
      }
      i++;
    });
    this._myTasksDueToday_part1 = arr1;
    this._myTasksDueToday_part2 = arr2;
    //this._myTasksDueToday_part3 = arr3;

    
  },
  error => {
    const res = this.dialogService.ErrorDialog('Server Error', 'Sorry, the system is unavailable at the moment.', 'Close', 'Try again');
    res.afterClosed().subscribe(dialogResult => {
      if (dialogResult) {
        //this.callNext(200);
      }
    });
  }
);

getMyTasksDueToday（url，duedate）{
console.log（this.currentDate）；
this.dashboardservices.GetGroupedTaskByDueDate（url，duedate）。订阅(
（modelData:ITasks[]）=>{
//console.log（modelData）；
这是。_myTasksDueToday=modelData；
设arr1=[]；
设arr2=[]；
设i=1；
modelData.forEach（（项目）=>{
//控制台日志（项目）；
如果（i）{
const res=this.dialogService.ErrorDialog（'服务器错误'，'抱歉，系统目前不可用'，'关闭'，'重试'）；
res.afterClosed（）.subscribe（dialogResult=>{
如果（对话框结果）{
//这是callNext（200）；
}
});
}
);

}

在component.html中：

     <mat-card>
              <mat-card-header>
                  <span>Due Today</span>
              </mat-card-header>
              <mat-card-content class="task-buttons-content-div">
                <div fxLayout="row wrap" fxLayoutAlign="space-between">
                  <div  >
                    <div  *ngFor="let rec of _myTasksDueToday_part1"  class="btn-div">
                      <button mat-raised-button color="warn" 
                        [matBadge]="rec.totaltasks" matBadgePosition="after" matBadgeColor="accent" class="btn-tasks" [routerLink]="['/tasks/alltasks/category/', rec.CategoryID,currentDate]">{{rec.CategoryName}}
                      </button>
                    </div>
                  </div>
                  <div  >
                    <div  *ngFor="let rec of _myTasksDueToday_part2"  class="btn-div">
                      <button mat-raised-button color="warn" 
                        [matBadge]="rec.totaltasks" matBadgePosition="after" matBadgeColor="accent" class="btn-tasks" [routerLink]="['/tasks/alltasks/category/', rec.CategoryID,currentDate]">{{rec.CategoryName}}
                      </button>
                    </div>
                  </div>
          
                </div>
                <div class="aligncenter">
                  <button mat-mini-fab color="accent" [routerLink]="['/tasks/alltasks/category/', all,currentDate]">All</button>
                </div>
              </mat-card-content>
            </mat-card>


今天到期
{{rec.CategoryName}
{{rec.CategoryName}
全部的

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

  getMyTasksDueToday(url,duedate){
console.log(this.currentDate);
this.dashboardservices.getGroupedTasksByDueDate(url,duedate).subscribe(
  (modelData: ITasks[]) => {
    //console.log(modelData);
    this._myTasksDueToday = modelData;
    let arr1 = [];
    let arr2 = [];
    let i = 1;
    modelData.forEach((item)=>{
      //console.log(item);
      if(i<=6){
        arr1.push(item);
      }else{
        this._myTasksDueToday_hasPart2 = true;
        arr2.push(item);
      }
      i++;
    });
    this._myTasksDueToday_part1 = arr1;
    this._myTasksDueToday_part2 = arr2;
    //this._myTasksDueToday_part3 = arr3;

    
  },
  error => {
    const res = this.dialogService.ErrorDialog('Server Error', 'Sorry, the system is unavailable at the moment.', 'Close', 'Try again');
    res.afterClosed().subscribe(dialogResult => {
      if (dialogResult) {
        //this.callNext(200);
      }
    });
  }
);

     <mat-card>
              <mat-card-header>
                  <span>Due Today</span>
              </mat-card-header>
              <mat-card-content class="task-buttons-content-div">
                <div fxLayout="row wrap" fxLayoutAlign="space-between">
                  <div  >
                    <div  *ngFor="let rec of _myTasksDueToday_part1"  class="btn-div">
                      <button mat-raised-button color="warn" 
                        [matBadge]="rec.totaltasks" matBadgePosition="after" matBadgeColor="accent" class="btn-tasks" [routerLink]="['/tasks/alltasks/category/', rec.CategoryID,currentDate]">{{rec.CategoryName}}
                      </button>
                    </div>
                  </div>
                  <div  >
                    <div  *ngFor="let rec of _myTasksDueToday_part2"  class="btn-div">
                      <button mat-raised-button color="warn" 
                        [matBadge]="rec.totaltasks" matBadgePosition="after" matBadgeColor="accent" class="btn-tasks" [routerLink]="['/tasks/alltasks/category/', rec.CategoryID,currentDate]">{{rec.CategoryName}}
                      </button>
                    </div>
                  </div>
          
                </div>
                <div class="aligncenter">
                  <button mat-mini-fab color="accent" [routerLink]="['/tasks/alltasks/category/', all,currentDate]">All</button>
                </div>
              </mat-card-content>
            </mat-card>