*ngFor not working (angular 4) - node.js

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

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

Answer 2

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