Angular start ngFor index from 1

Question

是否有可能从1而不是0开始ngFor index？

let data of datas;let i=index+1

没用.

Answer 1

 *ngFor="let item of items | slice:1; let i = index;

Answer 2

这是不可能的,但您可以使用Array.prototype.slice()跳过第一个元素:

<li *ngFor="let item of list.slice(1)">{{ item }}</li>

如果您更喜欢这种语法,SlicePipe也是一个选项:

<li *ngFor="let item of items | slice:1">{{ item }}</li>

描述

所有的行为是基于JavaScript的API的预期行为Array.prototype.slice()和String.prototype.slice().

在a上操作时Array,即使返回Array所有元素,返回的也始终是副本.

如果您还需要匹配索引,只需添加跳过的元素数量:

<li *ngFor="let item of list.slice(1); let i = index">{{ i + 1 }} {{ item }}</li>

要么:

<li *ngFor="let item of items | slice:1; let i = index">{{ i + 1 }} {{ item }}</li>

无论如何,如果你需要在模板中放置太多逻辑来使这个用于你的用例,那么你应该将该逻辑移动到控制器,然后用你需要的确切元素和数据构建另一个数组,或者缓存切片数组,以避免在数据未更改时创建新数组.

Answer 3

这对我来说效果很好。带单引号

*ngFor="let data of datas; let i = 'index+1'";

这样我就不会从数组 datas 中删除任何数据，同时索引从 1 开始到 datas 长度结束。

Answer 4

  <li *ngFor="let info of data; let i = index">
    {{i + 1}} {{info.title}}
  </li>

Answer 5

该问题有2个可能的答案,具体取决于实际问题.

如果意图是跳过数组的第一个元素,则涉及切片的答案是正确的方向.

但是,如果想要在仍然遍历所有数组的情况下简单地移动索引,则切片不是正确的方法,因为它将跳过数组中的第0个元素,从而仅输出n-1长度数组中的项n.

@Taylor提供了一个真实世界的例子,说明何时可能需要为了显示目的而移动索引,例如输出第一个条目应该读取1而不是0的列表.

这是另一个类似的例子:

<li *ngFor="let book of books; let i = index">
    {{ i + 1 }}.  {{ book.title }}
</li>

这将产生如下输出:

...