Can't change an *ngFor to a @for. Its @for(commune of communes) is rejected, telling that...

I have a Commune interface generated by OpenAPI generator:

/** Une commune du Code Officiel Géographique */
export interface Commune {
/** Code de la commune */
codeCommune: string;

/** Code du département */
codeDepartement: string;

/** Nom du département */
nomDepartement: string;
[...]
}


Until now, I was using it in an *ngFor, without troubles:

<datalist id="communesCOG">
<option *ngFor="let commune of communes" [value]="commune.codeCommune">{{commune.nomCommune}} ({{commune.nomDepartement}})</option>
</datalist>


Being in Angular 20 now, I'd like to put it in a @for statement instead:

<datalist id="communesCOG">
@for (commune of communes; track commune.codeCommune) {
<option [value]="commune.codeCommune">{{commune.nomCommune}} ({{commune.nomDepartement}})</option>
}
</datalist>


But I'm receiving the error that Type Commune[] must have a [Symbol.iterator]() method that returns an iterator.

The involved communes is coming from here:

export class CommunesComponent implements OnInit {
/** Année du Code Officiel Géographique. */
@Input()
anneeCOG: number;

/** Locale du tri des communes */
@Input()
locale: string = 'fr_FR';

/** Liste des communes ordonnées par locale */
communes: Commune[];

/** Codes communes avec leur commune associée. */
communesMap: Map<string, Commune> = new Map<string, Commune>();

/** Code commune sélectionné. */
codeCommune: string = null;

/** Commune sélectionnée (objet). */
commune: Commune = null;

/** Libellé final de la commune sélectionnée. */
libelleCommuneSelectionnee: string;
[...]


How can I put an iterator, and where, if it's what I have to do?

I don't understand why:

• *ngFor="let commune of communes" works
• but @for (item of items ; track item.id) applied to commune and communes doesn't

If I say: *ngFor="let A of B" and @for (C of D ; track C.id)

• 
  what are the types of A, B, C and D?
  Is type A ≠ type C or type B ≠ type D?
  
  
• 
  or is it the @for statement that doesn't work like *ngFor?!
  

Continue reading...