Question

我正在开发一个ionic2项目，该项目从API和API中提取数据，并向用户显示API的内容，该工作正常。但挑战是当用户向下滚动时，我希望在视图中对行进行编号。例如，如果API返回长度为40的数据，我想将行编号从1到40。

JS

  ionViewDidLoad(){
    let loader = this.LoadingController.create({
      content: 'Loading Test'
    });
    loader.present().then(()=>{
      this.http
        .get('http://localhost/scripts/items.php')
        .map(res => res.json()).subscribe(data => {
            console.log(JSON.stringify(data));
            this.store= data;

            for(var i=1;i<data.length;i++) {
              this.count = i++;

          }
        });
      loader.dismiss();
    });

HTML

<div *ngFor="let item of store">
    {{count}}. {{item.Item_Name}}
</div>

Answer 1

您可以使用*ngFor指令提供的索引：

<div *ngFor="let item of store; let i = index">
    {{i + 1}}. {{item.Item_Name}}
</div>

有关角度文档的更多信息：

https://angular.io/api/common/NgForOf#local-variables

也有一些不同的语法，现在可能推荐（取决于你使用的版本，但第一个仍在工作中我认为）：

*ngFor="let item of store; index as i"

Answer 2

另一种方法是在http.get回调中为数据添加标记：

for(var i = 0; i < data.length; i++) {
  data[i].index = i + 1;
}

然后：

<div *ngFor="let item of store">
   {{item.index}}. {{item.Item_Name}}
</div>

如果您不仅需要视图中的索引，这可能会有所帮助。在其他情况下，我建议使用@ martin-adámeksuggestion。

动态添加加上打字稿中的每一行

2 个答案: