Angular 2 - *ngFor:有没有办法使用替代结束条件?
Angular 2 - *ngFor : Is there a way to use an alternative end condition?
我来这里是因为经过许多小时的谷歌搜索,我没有找到一种方法来为使用内置指令制作的循环使用替代停止条件:*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 的结束条件。
非常感谢您的帮助!
*ngFor
提供了一个 last
值:
<div *ngFor="let pic of pics; let i = index; let last=last">
<div *ngIf="last">
...
</div>
</div>
另见
我终于以一种丑陋但可行的方式解决了我的问题...
我没有写另一个结束条件,而是用一个由函数计算的长度数组创建了一个循环。我在那个循环中读取了我的另一个阵列(带有我的照片的阵列)。
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>
我来这里是因为经过许多小时的谷歌搜索,我没有找到一种方法来为使用内置指令制作的循环使用替代停止条件:*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 的结束条件。
非常感谢您的帮助!
*ngFor
提供了一个 last
值:
<div *ngFor="let pic of pics; let i = index; let last=last">
<div *ngIf="last">
...
</div>
</div>
另见
我终于以一种丑陋但可行的方式解决了我的问题... 我没有写另一个结束条件,而是用一个由函数计算的长度数组创建了一个循环。我在那个循环中读取了我的另一个阵列(带有我的照片的阵列)。
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>