일부 지연된 목록을 통한 각도 2 루프

Question

각도 2와 TypeScript를 사용하여 일부 지연된 배열을 어떻게 루프합니까?

I는리스트를 통해 I 루프에 원하는 배열

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

이 있고 2000ms 지연 이름을 표시.

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

지연이 발생하지 않지만 한꺼번에 반복됩니다.

Answer 1

그냥 setTimeout을 사용하십시오. (예를 들어, 테스트되지 *)

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

Answer 2

Plunker example

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