在 Angular 中使用 RxJS 的 takeWhile
操作符可以在满足某个条件后停止循环。以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
import { takeWhile, map } from 'rxjs/operators';
@Component({
selector: 'app-my-component',
template: `
- {{ number }}
`,
})
export class MyComponent implements OnInit {
numbers: number[] = [];
ngOnInit(): void {
interval(1000)
.pipe(
map((value) => value + 1),
takeWhile((value) => value <= 10)
)
.subscribe((value) => {
this.numbers.push(value);
});
}
}
在上述代码中,我们使用 interval
创建一个每隔 1 秒发出递增值的 Observable。然后,我们使用 map
操作符对每个发出的值都加 1。接下来,我们使用 takeWhile
操作符来判断是否满足条件(值小于等于 10),如果不满足条件就停止循环。最后,我们通过 subscribe
订阅 Observable,将每个满足条件的值添加到 numbers
数组中。
当满足条件时,循环会停止,因此只会将小于等于 10 的值添加到数组中。在模板中使用 *ngFor
指令来循环遍历 numbers
数组,将每个值显示为列表项。