Question

我目前正在使用Angular 6，但遇到了一个小疑问。我们如何根据需要操纵在* 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

index变量不能按角度进行操作。您可以在ngIf*之前放置一个span div's条件来更改视图。以下是您的代码段更改以供参考：

<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 2

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

 - 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>

OR 如果您想要这样的输出：

- 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 3

您的索引比您真正想要的落后-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

如何在* ngFor中操纵索引值？

3 个答案: