arrays - Angular 2 recorrer una lista con algún retraso
¿Cómo puedo recorrer un array con algún retraso usando Angular 2 y TypeScript?
Tengo un arreglo,
students: Array<any> = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
Quiero recorrer la lista y mostrar los nombres con un retraso de 2000ms.
<div *ngFor="let student of students">
{{student.name}}
</div>
no funciona con un retraso pero está repitiéndose todo a la vez.
Respuesta #1
Solo usa setTimeout. Por ejemplo (* no probado):
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));
}
}
Respuesta #2
Ejemplo de Plunker
export class App {
name:string;
students: Array<any> = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
constructor() {
var timer = 0;
this.$students = Observable.from([[], ...this.students])
.mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
.scan((acc, curr) => {acc.push(curr); return acc;});
}
}
