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

标签 loops typescript angular conditional-statements ngfor

我来这里是因为经过许多小时的谷歌搜索,我没有找到一种方法来为使用内置指令 *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>

另见 Implementing ngClassEven ngClassOdd for angular 2

关于loops - Angular 2 - *ngFor : Is there a way to use an alternative end condition?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38705800/

相关文章:

javascript - 在循环中调用图像会产生重叠变量

typescript - 安装 jquery 类型的问题

javascript - 如何在组件自己的选择器上使用 *ngIf?

Angular Material : SassError: Invalid CSS after “@include mat” : expected 1 selector or at-rule, 为 “.core();”

javascript - 缩短 Javascript 代码

ruby - 查找可变数量的 Ruby 数组的乘积

php - 合并两个二维数组中的一列并删除重复项

c# - 上传文件报错 415 Unsupported Media Type

android - 从 TypeScript 调用 Android 方法

javascript - 如何检查 Angular 模块延迟加载是否适用于 Chrome?