Ошибка в шаблоне Angular: возможно, объект «не определен»

Я обнаружил ошибку в файле шаблона моего приложения Angular (dashboard.comComponent.html). Сообщение об ошибке: «Возможно, объект не определен». Вот соответствующая часть шаблона, вызывающая проблему:

<div>
    <p class = "title">Dashboard</p>

    <ul>
       @for(post of posts; track post.title){
        @if (post.id%2==0){
            <li>{{post.id}}-{{post.title}}</li>
        }
       }
    </ul>
</div>

// dashboard.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
    selector: 'app-dashboard',
    standalone: true,
    imports: [],
    templateUrl: './dashboard.component.html',
    styleUrl: './dashboard.component.scss',
})

export class DashboardComponent {
    email = localStorage.getItem('email');
    posts:any;
    constructor(private authService: AuthService) { 
        this.GetAllPosts();
    }

    signOut() {
        this.authService.signOut();
    }

    GetAllPosts(){
        this.authService.getAllPosts().subscribe((res)=>{
            this.posts = res;
        })
    }
}

Ошибка конкретно указывает на строку 10, где я пытаюсь перебрать сообщения с помощью цикла @for и проверить, имеет ли post.id % 2 == 0. Однако TypeScript помечает это как потенциальную ошибку, поскольку сообщения могут быть неопределенными или нулевой.

Как я могу изменить этот код шаблона, чтобы учесть возможность того, что сообщения могут быть неопределенными, избегая при этом этой ошибки?