ngFor not working, Firestore - google-cloud-firestore

Question

I am attempting an example of using Angular5 with Firestore, but I cannot retrieve any data from my Firestore database. Any help would be greatly appreciated as this is a show stopper. The irony is I can insert new records into the database using the example, I just cannot retrieve anything. Thanks in advance.
app.component.html:
<ul *ngFor="let post of posts | async">
<li>
<strong>{{ post.title }}</strong>
<br>
{{ post.content }}
</li>
</ul>
app.component.ts:
import { Component } from '#angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFirestoreCollection } from 'angularfire2/firestore';
import { AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
interface Post {
title: string;
content: string;
}
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
postsCollection: AngularFirestoreCollection<Post>;
posts: Observable<Post[]>;
constructor (private afs: AngularFirestore) {
}
ngOnit() {
this.postsCollection = this.afs.collection('posts');
this.posts = this.postsCollection.valueChanges();
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { FormsModule } from '#angular/forms';
var firebaseConfig = {
apiKey: "edited but correct",
authDomain: "edited but correct",
databaseURL: "edited but correct",
projectId: "edited but correct",
storageBucket: "",
messagingSenderId: "edited but correct"
};
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Looks like a typo:
ngOnit() {
Should be:
ngOnInit() {}
(You might even need ngAfterContentInit() if it's still not ready to load at that point in the lifecycle.)

Answer 2

The error is in this line
ngOnInit() {
this.postsCollection = this.afs.collection('posts'); <<HERE
this.posts = this.postsCollection.valueChanges();
}
Change it to:
this.postCollection = this.afs.collection< post > ('posts')
For reference you can read this page:
https://blog.angular.io/improved-querying-and-offline-data-with-angularfirestore-dab8e20a4a06