javascript - Angular NgFor 循环遍历数组对象，每个项目都有延迟

Question

我正在处理云在屏幕上水平移动的 UI。

我有一个要在云上显示的项目数组，数组中的每个项目都是一朵云。该组件具有 css 显示绝对位置，因此我当前的方法是在彼此之上创建一堆组件。我的目标不是一次加载数组的项目，而是想以 4000 毫秒的延迟加载每个项目。我知道我们可能需要 clouds.component.ts 或 html 模板 *ngFor 中的 setTimeout() 或 setInterval()。

我尝试了 *ngFor="let setTimeout(() => item, 4000) of items" 但似乎不正确。

下面是我的组件结构

云.component.ts

export class CloudComponent {
 @Input('cloud') public element: {
  ....
  // not important
 }
}

云.component.html

<app-cloud *ngFor="let item of items" [cloud]="item"></app-cloud>

云.component.ts

export class CloudsComponent {    
 public clouds: Cloud[] = [item,item,item,item,item]
 // service call
}

Answer 1

您可以在组件中设置所有内容，然后使用 setInterval()加载它们然后杀死然后销毁setInterval()什么时候结束。

dummyItems=[];
index = 1;
public clouds: Cloud[] = [item,item,item,item,item]

ngOnInit() {
  if( this.coulds[0]) { 
      this.dummyItems.push(this.clouds[0]);
  }
  this.timer = setInterval(() => {
      if (this.index < this.coulds.length) {
         this.dummyItems.push(this.clouds[index]);
         this.index++;
      } else { 
         clearInterval(this.timer); // this is optional but good practice
      }
   }, 4000)
}