gpt4 book ai didi

Angular 6延迟循环

转载 作者:太空狗 更新时间:2023-10-29 17:53:12 25 4
gpt4 key购买 nike

我有一个关于 Angular 循环的问题。我想延迟 ng-for 的渲染过程。例如,

<div *ngFor="let data of items | delay">
<app-my-component [data]="data"></app-my-component>
</div>

每次渲染延迟 10 毫秒。 “items”数组来自另一个我无法更改的组件。此外,可以增加和减少“items”数组的大小。也许,我可以用可观察的结构重定向它。我已经尝试使用 async 进行观察,但我无法实现。有人可以给我举个例子吗?

最佳答案

实际上这是一个有趣的问题,无法在 SO 上找到确切的问题。

这是我的解决方案,我编写了辅助方法以便于理解和将来的代码重用:

我的解决方案 Live StackBlitz editor Link

import { from, timer, Observable } from 'rxjs';
import {
scan,
map,
concatMap,
share,
} from 'rxjs/operators';

const timeOf = (interval: number) => <T>(val: T) =>
timer(interval).pipe(map(x => val));

const timed = (interval: number) => <T>(source: Observable<T>) =>
source.pipe(
concatMap(timeOf(1000)),
map(x => [x]),
scan((acc, val) => [...acc, ...val]),
)

用法是:

  arr = [1, 2, 3, 4, 5]

arr$ = from(this.arr)
.pipe(
timed(1000),
)

至于 HTML 将是:

<div *ngFor="let i of arr$ | async">
<b>{{ i }}</b>
</div>

至于解释:

from(this.arr) 将分别发出每个数组项,然后我对每个发出的项使用 concatMap()timer( 1000),这本质上是将每个发出的项目延迟 1 秒。最后,我使用 scan() 运算符将每个发出的项目组合回最终的累积数组。

关于Angular 6延迟循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53959911/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com