如何从 Angular 4 中的 *ngFor 循环中断

Question

如何在 Angular 4 中断开 *ngFor 循环？

我只是希望这个循环在执行一次后中断。

  <div *ngFor="let thing of things">
    <div *ngIf="thing == otherThing">
      <h4>Sub Title</h4>
      ***BREAK HERE***
    </div>
  </div>

Answer 1

你不能打破 *ngFor。

但是，您可以构建自定义管道来筛选数据。

但正如Jus10所说，更好的方法是在ts-file中执行此操作。

Answer 2

我必须打破循环，所以我遵循以下方法。

我不知道它是否有帮助，仍然共享那段代码。

正如Ausutine所提到的：

你不能打破*ngFor。

这只是另一种方式。

<ng-container *ngFor="let product of products; let i = index">
    <div *ngIf="i < 10">
        <span> product.name </span>
    </div>
</ng-container>

Answer 3

请尝试此切片，场景(您想为 n 个元素运行循环(

<div *ngFor="let thing of things.slice(0,1)">
<div *ngIf="thing == otherThing">
  <h4>Sub Title</h4>
</div>