Question

我正在使用UI，并且云在屏幕上水平移动。

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

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

下面是我的组件的结构

cloud.component.ts

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

clouds.component.html

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

clouds.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)
}

Answer 2

您必须以4000毫秒的超时将当前阵列馈入虚拟阵列。

ALTER PROCEDURE [dbo].[Resv_LoadResv]
AS
BEGIN
    SELECT 
        rs.[Id] AS 'Id',
        bkngSrc.[SourceName] AS 'BkngSrc',
        payMode.[Description] AS 'PayMode',
        rs.[GuestName] AS 'GuestName',
        rs.[Addr] AS 'Addr',
        rs.[City] AS 'City',
        rs.[EntryDate] AS 'EntryDate'
    FROM 
        dbo.ResvReg rs
    -- when I try to put where clause here, I get an error
    WHERE 
        EntryDate >= '11/08/2018'
    LEFT JOIN 
        [dbo].[BkngSource] bkngSrc ON rs.[BkngSrc] = bkngSrc.[Id]
    LEFT JOIN 
        [dbo].[PaymentMode] payMode ON rs.[PayMode] = payMode.[Id]
END

在模板中，

this.dummyItems=[]  
for(let i = 0; i < this.items.length; i++){
     let item = this.items[i];
     setTimeout(() => {
         this.dummyItems.push(item);
     }, 4000*(i+1));
 }

Answer 3

我会尝试在您的.ts组件中创建一个称为加载元素的函数。

有一个对象：

public data: any;

loadData(): void {
 this.dataService.loadOneMissingData((data_piece) => {
  this.data.push(data_piece);
  sleep(2000);
});
 if (this.dataService.data.length != this.data.length) {
  this.loadData();
 }
}

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

3 个答案: