4

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

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

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

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

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

问题是，我的第一张图片在每一行的索引总是低于用于显示该行的索引。因此，如果我希望能够显示我所有的图片，我必须能够更改我的 *ngFor 的结束条件。

非常感谢您的帮助！

4

2 回答 2

3

*ngFor提供一个last值：

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

另请参阅实现 ngClassEven ngClassOdd for angular 2

于 2016-08-01T18:42:29.793 回答
1

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

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

如何解决它的示例：

<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>
于 2016-08-03T20:59:37.757 回答