Angular 2在列表上循环有些延迟 [英] Angular 2 loop through a list with some delay

问题描述

如何使用Angular 2和TypeScript延迟循环遍历数组?

How do I loop through an array with some delay with Angular 2 and TypeScript?

我有一个数组

students: Array<any> = [
    {
      name: "Alan"
    },
    {
      name: "Jake"
    },
    {
      name: "Harry"
    },
    {
      name: "Susan"
    },
    {
      name: "Sarah"
    },
    {
      name: "Esther"
    }
];

我想遍历列表并以2000ms延迟显示名称.

I want to loop through the list and display the names with a 2000ms delay.

<div *ngFor="let student of students">
    {{student.name}}
</div>

没有延迟，而是一次循环.

doesn't work with a delay but is looping all at once.

推荐答案

只需使用setTimeout.例如(*未经测试):

Just use setTimeout. For example (* not tested):

students: Array<any> = [ ];

populateArrayWithDelay():void{
    let people = [
        {
            name: "Alan"
        },
        {
            name: "Jake"
        },
        {
            name: "Harry"
        },
        {
            name: "Susan"
        },
        {
            name: "Sarah"
        },
        {
            name: "Esther"
        }
    ];
    for(let i = 0; i < people.length; i++){
        let student = people[i];
        setTimeout(() => {
            this.students.push(student);
        }, 2000*(i+1));
    }
}

这篇关于Angular 2在列表上循环有些延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！