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

Question

我只想让这个循环在执行一次后中断。

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

Answer 1

你不能破坏 *ngFor。

但您可以构建自定义管道来过滤数据。

但是正如 Jus10 所说，更好的方法是在 ts 文件中进行。

Answer 2

我不得不打破循环，所以我采用了以下方法。

我不知道它是否有帮助还是分享那段代码。

正如 ausutine 提到的：

You can't break *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>

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

How can I break from an *ngFor loop in Angular 4?

templates

ngfor

angular