angular 中止循环

在Angular中，可以使用`ngFor`指令来循环渲染模板。如果需要在循环过程中中止循环，可以使用`ngFor`指令的`ngForOf`输入属性，并在组件中使用`slice`方法来截取需要循环的部分。例如，如果需要在第3个元素后中止循环，可以使用以下代码：

<div *ngFor="let item of items.slice(0, 3)">
  {{ item }}
</div>

这将只循环前3个元素。如果需要动态中止循环，可以在组件中使用`slice`方法，并将其绑定到`ngForOf`输入属性。例如：

<div *ngFor="let item of slicedItems">
  {{ item }}
</div>
<button (click)="stopLoop()">Stop Loop</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of slicedItems">
      {{ item }}
    </div>
    <button (click)="stopLoop()">Stop Loop</button>
  `,
})
export class AppComponent {
  items = [1, 2, 3, 4, 5];
  slicedItems = this.items.slice(0, 3);

  stopLoop() {
    this.slicedItems = this.items.slice(0, 3);
  }
}

在上面的例子中，初始时只循环前3个元素。当点击“Stop Loop”按钮时，会将`slicedItems`重新赋值为前3个元素，从而中止循环。