*ngFor Doesn't List All My Items Just The Recent One

Ionic Framework Ionic Angular
1

I have this simple ngFor for showing my posts from firebase but i only get the recent one and not all of them. What could be the cause?
This is how i create the posts

createPost(){
    const image = this.imageURL
    const desc = this.desc

    this.afstore.doc(`users/${this.user.getUID()}`).set({
      posts: firestore.FieldValue.arrayUnion(image)
    })

    this.afstore.doc(`posts/${image}`).set({
      desc,
      author: this.user.getUsername(),
      likes:[]
    })
  }

This is how i store them

userPosts

  constructor( private router: Router, private afs: AngularFirestore, private user: UserService) { 
    const posts = afs.doc(`users/${user.getUID()}`)
    this.userPosts = posts.valueChanges()
  }

This is how im showing them

<ion-header>
  <ion-toolbar>
    <ion-title>profile</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <div id="images">
    <div class="image" *ngFor="let post of (userPosts | async)?.posts">
        <ion-card (click)="goTo(post)">
          <ion-img src="https://ucarecdn.com/{{ post }}/-/scale_crop/200x200/center/"></ion-img>
        </ion-card>
    </div>
  </div>

</ion-content>

Any more info that need to be providen i will do it right away.