在 Angular 2 中打破 NgFor 循环

Posted 2023-03-13

【中文标题】在 Angular 2 中打破 NgFor 循环

【英文标题】：Break NgFor Loop in Angular 2

【发布时间】：2017-02-16 02:20:25

【问题描述】：

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

【问题讨论】：

我想你可以从这个answer得到灵感

【参考方案1】：

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

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

正如冈特所说：

没有破解 ngFor 的选项。

这只是一种替代方法。

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

【参考方案2】：

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

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

【参考方案3】：

由于 ngFor 没有中断的选项，您可以尝试另一种方法。

这种方式实际上并没有打破循环，而是在满足特定条件后跳过下一个元素来显示/运行，无论下一个元素是 true 还是 false 。

在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 不同。