Question

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

例如，如果json值是

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

我不仅要显示'内容'的循环值，还要计算它们，以便结果如下所示。

1 <- counting
Content1

2
Content2

3
Content3

4
Content4

5
Content5

6
Content6

7
Content7

8
Content8

Answer 1

迭代数组

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

假设你有一个可迭代：

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>

Answer 2

Element

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

你可以只打印items数组的长度。

Answer 3

我同意以上答案，但是我想提供创建动态内容的详细信息，更好地在组件中创建逻辑，请参见以下代码：我想在一个div中显示6个项目，而在另一个div中显示其他

component.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);
      }
    });
  }
);

}

以及在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>

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

3 个答案:

迭代数组

迭代对象属性

更新