在 ngFor 中显示项目，在 Angular 5 中有一些延迟

Question

我有一个场景，其中我有一个在运行时间填充的数组，我想通过 ngFor 循环在 HTML 模板中显示它的元素，但有一些延迟。（即显示第一项，然后在延迟一段时间后显示第二项，依此类推。

<ul>
 <li *ngFor="let x of array">{{x.name}}</li>
</ul>

this.selectedArray = [];
getArrayValues(index) {

this.Array2.forEach(e => {
  setTimeout(() => {
    this.selectedArray.push(e);
  }, 1000);
 })
}

我需要在一些延迟后生成每一里。

Answer 1

现在，我只能想到这个解决方案，创建一个每隔一秒填充一次的 tempArray。我写了一个递归函数，每隔一秒调用一次，基本条件是检查循环索引是否大于或等于实际数组长度

<ul>
  <li *ngFor="let x of tempArray">{{x.name}}</li>
</ul>

 arr = [1,2,3];

 tempArr = []


 function delayMe(index, tempArr) { 
  if (index >= arr.length) {
   return;
  }
    (new Promise(resolve => setTimeout(resolve, 1000))).then(() => {
      tempArr.push(arr[index]);
      console.log(tempArr);
      delayMe(index + 1, tempArr)
    })

 }

 delayMe(0, tempArr);

Answer 2

只需更改 setInterval 的 setTimeout 并添加 this.Array2.pop() 以在一段时间后获得新值

  setInterval(() => {
    this.selectedArray.push(this.Array2.pop());
  }, 1000);

Answer 3

有很多 animations 可用 Angular 实现，可以应用于 ngFor

可以直接看demo：

https://stackblitz.com/edit/angular-list-animations?file=app%2Fapp.component.html

比如一个动画ease-in

组件

animations: [
  trigger('flyInOut', [
    state('in', style({opacity: 1, transform: 'translateX(0)'})),
    transition('void => *', [
      style({
        opacity: 0,
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition('* => void', [
      animate('0.2s 0.1s ease-out', style({
        opacity: 0,
        transform: 'translateX(100%)'
      }))
    ])
  ])
]

然后，在HTML

<ul>
 <li *ngFor="let x of array" [@flyInOut]="'in'">{{x.name}}</li>
</ul>

Answer 4

这个有效：

  ngOnInit() {
    this.getArrayValues(0);
  }

  getArrayValues(index) {
    setInterval(() => {
      if(index == this.Array2.length)
        return;
      this.selectedArray.push(this.Array2[index]);
      index++;
    }, 1000);
  }

DEMO

在 ngFor 中显示项目，在 Angular 5 中有一些延迟

Display item in ngFor with some delay in Angular 5

ngfor

angular