*ngFor not working (angular 4)

Question

I've imported the required modules also checked for errors but nothing helps. I am new to angular and still learning.

Here's is my app.module.ts file

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { CommonModule } from "@angular/common";

    import { AppComponent } from './app.component';
    import { ContactsComponent } from './contacts/contacts.component';


    @NgModule({
        declarations: [
        AppComponent,
        ContactsComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        CommonModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { } 

And here's the part of the code which is not working, but not working throwing any error either.

<div class="container">
  <div *ngFor = "let contact of contacts" >
        <div class = "col-md-3">
          {{contact.first_name}}
        </div>
        <div class = "col-md-3">
            {{contact.last_name}}
        </div>
        <div class = "col-md-3">
              {{contact.phone}}
        </div>
        <div class = "col-md-3">
                <input type="button" (click)="deleteContact(contact._id)" value ="Delete" class="btn btn-danger" />
        </div>
   </div>
</div>   

Update: I've included my contact.srevice.ts file.

   import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Contact} from './contact';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ContactService {

  constructor(private http: Http) { } 
  //retrieving contact_service

    getContacts() :Observable<any[]>
    {
      return this.http.get('http://localhost:3000/api/contacts')
      .map(res => res.json());
    }

    //add contact method
    addContact(newContact){
      var headers = new Headers();
      headers.append('Content-Type','application/json');
      return this.http.post('http://localhost:3000/api/contact', newContact, {headers:headers})
      .map(res=>res.json());
    }

    //delete Contact Method
    deleteContact(id){
      return this.http.delete('http://localhost:3000/api/contact/'+id)
      .map(res=>res.json());
    }
}

Network Activity

Answer 1

you need to do like this

import { Component } from '@angular/core'; 
import {Contact} from './contact';

 @Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] }) 
export class AppComponent  implements OnInit
{ 
     title = 'New App';
     contacts: Contact[];

     ngOnInit() {
      this.service.getContacts()
       .subscribe(data=> this.contacts = data)
    }
} 

contact.service.ts file

    //make use of newer api of http 
    import { HttpClient, HttpHeaders } from '@angular/common/http';

 export class ContactService {

    constructor(private http: HttpClient) { } 
    getContacts()  :Observable<Contact[]>
    { 
      return 
       this.http.get<Contact[]>('http://localhost:3000/api/contacts');
    }



addContact(newContact) {
 const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
  })
 };

  return this.http.post('http://localhost:3000/api/contact', newContact, httpOptions)
    .map(res=>res.json());
}
 }

Answer 2

As per your .ts code you need to bind some data with your object named as contacts like this to get it work

contacts = [
    {first_name: "Pardeep", last_name: "Jain", phone: '90'},
    {first_name: "Pardeep", last_name: "Jain", phone: '90'},
    {first_name: "Pardeep", last_name: "Jain", phone: '90'}
  ]

Working Example

Update

You need to bind data whatever you get from this service like this -

ngOnInit() {
      this.service.getContacts()
       .subscribe(data=> this.contacts = data)
    }