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);
 })
}

我需要在延迟一段时间后生成所有li。

Answer 1

这有效：

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

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

DEMO

Answer 2

Angular实现了许多animations可用，它们可以应用于ngFor

您可以直接观看演示：

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 3

现在，我只能想到这种解决方案，创建一个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 4

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

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

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

4 个答案: