Question

我正在尝试使用模板内的*ngFor迭代数组，并使用* ngIf搜索基于键的元素。现在，当条件与键匹配时，我想要打破*ngFor。我想知道angular2中是否有任何选项可以根据条件打破ngFor循环。

Answer 1

没有选项可以打破ngFor。您可以使用在满足条件的元素之后不返回值的自定义管道。

对于更具体的方法，请提供有关您实际尝试完成的更具体的信息。

Answer 2

由于没有为ngFor打破的选项，你可以尝试另一种方法。

这种方式实际上并没有打破循环，而是在满足某个条件后跳过下一个要显示/运行的元素，无论下一个元素是否为真。

在page.html

<div class="loop-div" *ngFor="let element of array">
 <div class="check-div" *ngIf="displayCondition(checkValue, element.value)" > {{displayValue}} </div>
</div>

在page.ts

checkSameValue;   //initialised before constructor
displayCondition(checkValue, elementValue) {
        if(this.checkSameValue && this.checkSameValue == checkValue) {
          return false;
        }
        if(checkValue == elementValue) {
          this.checkSameValue = checkValue;
          return true;
        }
      }

即使条件满足，此特定代码也会转义.check-div以进一步显示。即一旦条件满足，除非checkValue不同，否则循环不会显示。

Answer 3

我不得不打破循环，所以我遵循以下方法。

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

如Gunter所述：

没有办法破坏ngFor。

这只是一种替代方法。

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

在Angualr2中打破NgFor循环

3 个答案: