Break/Stoping *NgFor 循环 Angular

Question

我有一个 *NgFor 循环来写入 table 的行。但我只想显示前 10 个结果。有没有办法break/stop循环?

类似的东西：

<ng-container *ngFor="let row of rows">
    <td>{{row.myCol1}}</td>
    <td>{{row.myCol2}}</td>
    <td>{{row.myCol2}}</td>
    ...
</ng-container>

Answer 1

你可以在for循环中使用索引。

 <ng-container *ngFor="let row of rows;let i = index">
      <ng-container *ngIf="i <= 10">
         <td>{{row.myCol1}}</td>
         <td>{{row.myCol2}}</td>
         <td>{{row.myCol3}}</td>
       </ng-container>
 </ng-container>

或者您可以在 ts 中创建子数组并对其进行迭代。

n: number = 10;
const subArray = rows.slice(0, n);

Answer 2

Angular slice 管道的应用之一是切片数组（其他是切片字符串）。

尝试以下方法

<ng-container *ngFor="let row of rows | slice:0:10">
    <td>{{row.myCol1}}</td>
    <td>{{row.myCol2}}</td>
    <td>{{row.myCol2}}</td>
    ...
</ng-container>

Break/Stoping *NgFor 循环 Angular

Break/Stoping *NgFor loop in Angular

angular

ngfor