How to show all objects in an array with the same name

I dont know, but it was throwing me and undefined error when I didn’t have it. For example in my html I have this

<ion-card *ngFor="let post of posts | async" (click)="navigateToDetail(post.id)" >
    <ion-card-content>
      <h1 [innerHTML]="post?.title.rendered"></h1>
      <p [innerHTML]="post?.excerpt.rendered"></p>
      <ion-row>
        <ion-col>
          <b>{{post?.date | date: "dd MMM yyyy"}}</b> |
          <ion-badge color="second"[innerHTML]="post?.post_categories[0]?.name"></ion-badge>
          <ion-badge color="second"[innerHTML]="post?.post_categories[1]?.name"></ion-badge>
          <ion-badge color="second"[innerHTML]="post?.post_categories[2]?.name"></ion-badge>
          <ion-badge color="second"[innerHTML]="post?.post_categories[3]?.name"></ion-badge>

        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

If a post doesn’t have four categories it throws an error if I dont use the ? operator. Im using an Observable and async so maybe that’s why its causing the issue.