title: How to display objects of an array in Angular 4?
body: <p>I am new to Angular 4. I wanna display the contents of an array. According to docs, I have to use *ngFor directive to iterate and display the values. But I am unable to get any kind of results. </p>
  
  <p><strong>Home.component.html:</strong></p>
  
  <pre><code>&lt;h3 class="title"&gt;Top Restaurants near you&lt;/h3&gt;
  &lt;div&gt;
    &lt;div class="card" *ngFor="let restaurant of restaurants"&gt;
      &lt;span&gt;{{restaurant._id}}&lt;/span&gt;
      &lt;span&gt;{{restaurant.name}}&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Home.component.ts:</strong> </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { RestuarantService } from '../../services/restuarant.service';
  import { Router } from '@angular/router';
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    restaurant: Object;
  
    constructor(private router: Router, private restaurantService: RestuarantService) { }
  
    ngOnInit() {
  
      this.restaurantService.getRestaurants().subscribe(restaurants =&gt; {
        console.log(restaurants.restaurants[0]);
      }, err =&gt; {
        console.log(err);
        return false;
      });
  
  
    }
  
  }
  </code></pre>
  
  <p><strong>Restaurant.service.ts:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class RestuarantService {
  
    constructor(private http: Http) { }
    getRestaurants() {
      let headers = new Headers;
      headers.append('Content-Type', 'application/json');
      return this.http.get('http://localhost:3000/restaurants', { headers: headers }).map(res =&gt; res.json());
    }
  
  }
  </code></pre>
  
  <p>**Edit: 
  Okay, So after a few struggle with this, and along with help of Sajeetharan, I am posting the solution.</p>
  
  <p>Home.Component.TS should be like this:** </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { RestuarantService } from '../../services/restuarant.service';
  import { Router } from '@angular/router';
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    restaurants: any = [];
  
    constructor(private router: Router, private restaurantService: RestuarantService) { }
  
    ngOnInit() {
  
      this.restaurantService.getRestaurants().subscribe(restaurants =&gt; {
        this.restaurants = restaurants.restaurants[0];
        console.log(JSON.stringify(this.restaurants));
      }, err =&gt; {
        console.log(err);
        return false;
      });
  
  
    }
  
  }
  </code></pre>