Angular Asynch ngFor

app.component.ts

import { Component, OnInit, AfterViewInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Title } from "@angular/platform-browser";

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/delay';

@Component({
  selector: "app-root",
  template: `

<h1>API Test</h1>

<div style="max-height: 100px !important;background-color: burlywood;overflow-y: auto">
  <div *ngFor="let item of userData$ | async">
    <div>item.postId</div>
    <div>item.id</div>
    <div>item.name</div>
    <div>item.email</div>
    <div>item.body</div>
  </div>

</div>
`
})


export class AppComponent implements OnInit {

  public userData$: Observable<UserData[]>

  constructor(private titleService: Title, private _http: HttpClient) { }

  ngOnInit() {
    this.titleService.setTitle("Home");


    console.log('date: ', new Date());
    console.log('date: ', new Date().toString());
    console.log('date: ', new Date().toLocaleString());


    this._http.get('https://jsonplaceholder.typicode.com/comments').subscribe((res: any) => {
      let users = res
      this.userData$ = Observable
        .of(users)
        // .delay(500);
      console.log(this.userData$);
    })

  }


  getVehicles() {
    return Observable.apply(2200).map(i => [{ name: 'car 1' }, { name: 'car 2' }])
  }

}

export interface UserData {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
}