如何操作 *ngFor 中的索引值？

Question

我目前正在使用Angular6，我运行陷入了一个小疑问。我们如何根据需要操作我们在 *ngFor 中获得的索引变量。例如，

<li *ngFor="let iah of jsonObj; let i = index;">
   <span>{{jsonObj[i].content}}</span>
   <span>{{jsonObj[(i+1)].content}}</span>
</li>

上面的代码片段将获取同一个对象两次并显示其内容。如何在第一个跨度中显示第 i 个对象，在第二个跨度中显示第 (i+1) 个对象？现在我做的方式只适用于第一次迭代。一旦进入第二次迭代，就会发生重复。对此有什么想法吗？

Answer 1

你的指数比你真正想要的低了-1。这意味着在第一次迭代时你打印出

index = 0;
jsonObj[0].content
jsonObj[1].content

index= 1;
jsonObj[1].content
jsonObj[2].content

index=2:
jsonObj[2].content
jsonObj[3].content

Answer 2

无法在angular中操作索引变量。您可以在 span div's 之前放置一个 ngIf* 条件来更改视图。以下是您的代码段中的更改以供参考：

<div *ngFor="let iah of jsonObj; let i = index;">
    <li *ngIf="i%2==0">
        <span>{{jsonObj[i].content}}</span>
        <span>{{jsonObj[(i+1)].content}}</span>
    </li>
</div>

Answer 3

根据我的理解，如果你想要这样的输出：

 - test1 test2
 - test2 test3
 - test3 test4
 - test4

然后你需要检查你的 json[i+1] 是否有数据，因为如果你使用 i+1 最后一个索引之后数组没有 i+1 值，所以它给出你错了。

因此您可以在 html:

中像这样使用它

<li *ngFor="let iah of jsonObj; let i=index;">
    <span> {{ jsonObj[i].content }}</span>
    <span *ngIf="i < jsonObj.length -1"> {{ jsonObj[i+1].content }} </span>
</li>

或如果你想要这样的输出：

- test1 test2
- test3 test4

您可以使用以下方法：

<ng-template ngFor let-item let-i="index" [ngForOf]="jsonObj">
    <li *ngIf="i%2 == 0">
        <span> {{ jsonObj[i].content }}</span>
        <span *ngIf="i < jsonObj.length -1"> {{ jsonObj[i+1].content }} </span>
    </li>
</ng-template>

查看Stackblitz现场演示

Answer 4

您将无法仅从 HTML 开始按列显示它。

通过迭代修改数组。您可以在其中分配数据的地方执行此操作：

TS

newJsonObj = [];

for(let i = 0; i<this.jsonObj.length; i++) {
    this.newJsonObj.push({key: this.jsonObj[i].content, value: this.jsonObj[i+1].content})
    i++;
}

HTML

<li *ngFor="let iah of newJsonObj;">
   <span>{{iah.key}} </span>
   <span>{{iah.value}}</span>
</li>

here 你可以找到 stackblitz

如何操作 *ngFor 中的索引值？

How to manipulate index value in *ngFor?

typescript

ecmascript-6

ngfor

angular