آرایهها - حلقه زدن در یک لیست در Angular 2 با کمی تأخیر

چگونه میتوانم با Angular 2 و TypeScript یک آرایه را با کمی تأخیر حلقهزنی کنم؟

من یک آرایه دارم،

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>

با تأخیر کار نمیکند اما همزمان در حال حلقه زدن است.

پاسخ شماره ۱

فقط از 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));
    }
}

پاسخ شماره ۲

مثال 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;});
  }
}