Angular 2 *ngFor does not print to table - html

Question

I am new at using Angular and I was having problems displaying data retrieved from a database. Can someone help me understand why when I use *ngFor on this HTML code only the gets displayed on my html but not the rest of the rows?
This is my HTML file
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>School</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let contact contacts$">
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
</table>
And this is my component.ts file
import { Component, OnInit } from '#angular/core';
import { ContactService } from "./contacts.service";
import { Router } from '#angular/router';
import { Observable } from 'rxjs/Observable';
import { Contact } from './contact'
#Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css']
})
export class ContactsComponent implements OnInit {
constructor( private router:Router, private contactService: ContactService )
{}
contacts$: Observable<Contact[]>;
ngOnInit() {
this.contacts$ = this.contactService.getContacts();
}
}
I am getting my information from a GET HTTP call and it works fine if I do the *ngFor on a tag but it does not display when i use it on a tag
Here is the code for when I do it on a
<div *ngFor="let contact of contacts$ | async" >
{{contact.first_name}}
</div>

Answer 1

As far as I can see you are missing the of in your *ngFor tr tag.
Your HTML code should be like below
<tbody>
<tr *ngFor="let contact of contacts$"> <!-- adding of to retrive data -->
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
Hope it helps.

Answer 2

You are not writing correct loop syntax like in this case you missing "of" and also cross check for correct Property Name.
<tbody>
<tr *ngFor="let contact of contacts">
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>