How do I list Observable array with async pipe using @for in Angular 18?

I try to upgrade to Angular 18, I encountered a problem about for-loop from *ngFor to @for in template.

<!-- It works -->
<div *ngFor="let item of items$ | async">
    {{ item.name }}
</div>

I don’t have any idea to list Observable items$ using @for in template

@for (item of items$; track item.id) {
    {{ item.name }}
}

Could anyone give me advice?

>Solution :

Wrap your observable & the AsyncPipe with parenthesis.

@for (item of (items$ | async); track item.id) {
    {{ item.name }}
}