下面是一个使用mutate()
和forEach()
的示例解决方法:
import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { take } from 'rxjs/operators';
@Component({
selector: 'app-root',
template: `
Angular Signals
- {{ number }}
`,
})
export class AppComponent {
numbers$: Observable;
constructor() {
this.numbers$ = this.generateNumbers();
}
generateNumbers(): Observable {
const numbers: number[] = [1, 2, 3, 4, 5];
const source$ = interval(1000).pipe(take(numbers.length));
return source$.pipe(
mutate((value, index) => {
numbers[index] = value + 1;
}),
forEach(() => {
// Do something for each emitted value
}),
map(() => [...numbers])
);
}
}
在上述代码中,我们使用generateNumbers()
方法生成一个Observable
。我们使用interval()
和take()
操作符来模拟每秒发出一个值的情况,并且只取前面的5个值。
然后,我们使用mutate()
操作符来修改numbers
数组中的值。mutate()
操作符接收一个回调函数,该函数会在每个值发出时被调用,并且可以修改传入的值。
我们还使用forEach()
操作符来执行每个值发出时的附加操作。在此示例中,我们只是留下了一个空的回调函数。您可以在其中执行任何其他操作,例如打印日志或执行其他副作用。
最后,我们使用map()
操作符将修改后的numbers
数组转换为一个新的数组,并返回给模板进行显示。
请注意,为了在模板中显示numbers$
的值,我们使用了async
管道。