typescript Angular 2 - *ngFor ：有没有办法使用替代的结束条件？

Angular 2 - *ngFor : Is there a way to use an alternative end condition?

提问by Guillaume Le Mière

I come here because after many hours googling, I didn't find a way to use an alternative stop condition for the loops made with the built-in directive : *ngFor.

我来到这里是因为经过数小时的谷歌搜索后，我没有找到一种方法来为使用内置指令创建的循环使用替代停止条件：*ngFor。

Actually any *ngFor finish the loop with this condition : index < array.length. I want to know if there is a way to end a loop with another condition like : i < myVariable.

实际上，任何 *ngFor 都以这种条件结束循环：index < array.length。我想知道是否有办法以另一种条件结束循环，例如 : i < myVariable。

If you wonder why I want to do that, it's because I'm working on a picture gallery working this way :

如果你想知道我为什么要这样做，那是因为我正在以这种方式工作的图片库：

<div *ngFor="let pic of pics; let i = index">
    <div *ngIf="whichRowType(i) == 3">
        <small>pic[whichIndex(i)].id</small>
        <small>pic[currentIndex + 1].id</small>
        <small>pic[currentIndex + 2].id</small>
    </div>

    <div *ngIf="whichRowType(i) == 2">
        <small>pic[whichIndex(i)].id</small>
        <small>pic[currentIndex + 1].id</small>
    </div>

    <div *ngIf="whichRowType(i) == 1">
        <small>pic[whichIndex(i)].id</small>
    </div>
</div>

In this example, I create a row each 3 pics. I have three types of rows : - Display one pic, - Display two pics, - Display three pics.

在这个例子中，我每 3 张图片创建一行。我有三种类型的行： - 显示一张图片， - 显示两张图片， - 显示三张图片。

The problem is, the index of my first picture on each row is always inferior to the index used to display the row. So if I want to be able to display all my pictures, I have to be able to change my ending condition of my *ngFor.

问题是，我第一张图片在每一行上的索引总是不如用于显示该行的索引。所以如果我想能够显示我所有的图片，我必须能够改变我的*ngFor 的结束条件。

Thank you very much for your help!

非常感谢您的帮助！

采纳答案by Günter Z?chbauer

*ngForprovides a lastvalue:

*ngFor提供一个last值：

  <div *ngFor="let pic of pics; let i = index; let last=last">
    <div *ngIf="last">
      ...
    </div>
  </div>

See also Implementing ngClassEven ngClassOdd for angular 2

另请参阅为 angular 2 实现 ngClassEven ngClassOdd

回答by Guillaume Le Mière

I finally solved my issue an ugly but working way... Instead of writing another end condition I did make a loop with an array of length that is calculated by a function. I read my other array (the one with my pics) in that loop.

我终于以一种丑陋但有效的方式解决了我的问题......我没有编写另一个结束条件，而是使用由函数计算的长度数组创建了一个循环。我在该循环中读取了我的另一个数组（带有我的照片的数组）。

Angular should really make something for that! Thank you for your help guys!

Angular 真的应该为此做点什么！谢谢你们的帮助！

Example of how to solve it :

如何解决它的示例：

<div *ngFor="let galleryIndex of galleryIndexes; let i = index">
    <div *ngIf="whichRowType(galleryIndex) == 3">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
        <small>pics[currentIndex + 1].id</small>
        <small>pics[currentIndex + 2].id</small>
    </div>

    <div *ngIf="whichRowType(galleryIndex) == 2">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
        <small>pics[currentIndex + 1].id</small>
    </div>

    <div *ngIf="whichRowType(galleryIndex) == 1">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
    </div>
</div>