Angular 从 1 开始 ngFor 索引

Question

是否可以从 1 而不是 0 开始 ngFor 索引？

let data of datas;let i=index+1

没用。

Answer 1

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

切片管

Answer 2

这个问题有 2 个可能的答案，这取决于实际问的是什么。

如果意图是跳过数组的第一个元素，那么涉及slice的答案是正确的。

然而，如果目的是简单地移动，同时仍然遍历所有数组的索引，然后切片是不是正确的方法，因为它会跳过第0个元素的阵列中，从而仅输出n-1从数组项长度n 。

@Taylor 给出了一个实际示例，说明何时可能需要为了显示目的而移动索引，例如在输出第一个条目应为 1 而不是 0 的列表时。

这是另一个类似的例子：

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

这将产生如下输出：

1. 样本书名

2. 另一个书名

...

Answer 3

这是不可能的，但您可以使用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()的预期行为。

在对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 4

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

Answer 5

至少现在你不能，看来 angular 2 背后的团队正试图保持 ngFor 非常简单，Angular 2 repo 上也有一个类似的问题，关于对索引进行多次分配，答案是：

语法必须简单，工具才能支持它。

Answer 6

对于自定义标签/默认标签，我们可以像下面这样处理它：

 <custom-tag *ngFor="let item of items; let i = index" [text]="Item + getIndex(i)"></custom-tag>

在 JavaScript 中：

function getIndex(i) {return Number(i + 1).toString();}

Answer 7

我在 *ngFor 类中使用let i = index 。 因为它是从第 0 个元素开始，所以我在这里使用{{i+1}} 而不是 {{i}}，它将跳过数组中的第 0 个元素。 它对我来说很好...

<ion-row *ngFor="let key of ques; let i = index">
  <ion-text>{{i+1}}) {{key.question}}</ion-text>

Answer 8

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

*ngFor="let item of items; let i = 'index+1';

Answer 9

您可以将它包裹在一个 div 周围，然后像这样使用*ngIf="i != selectedIndex" ：

 <div *ngFor="let item of yourArray; let i = index">
     <div *ngIf="i != selectedIndex"> {{ item }} </div>
 </div>

其中selectedIndex是您要删除的项目索引