Angular 17 - new control flow migration question

Question

I performed migration with this command - ng g @angular/core:control-flow.

Now I am getting an error - Type 'unknown' must have a 'Symbol.iterator' method that returns an iterator.

This error is related to the '| async' part of converted code.

One of my *ngFor code snippet in 'autoComplete' block got converted like this

<mat-form-field>
  <input matInput
  formControlName="fieldname"
  type="text"
  [matAutocomplete]="auto_fieldname">
  <mat-autocomplete autoActiveFirstOption
  #auto_fieldname="matAutocomplete">
    <mat-option *ngFor="let opt of fieldNameField.options | async"
    (click)="onFieldNameClick(opt)"
    [value]="opt.fieldname">
      {{ opt.fieldname }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

to

<mat-form-field>
  <input matInput
    formControlName="fieldname"
    type="text"
    [matAutocomplete]="auto_fieldname">
  <mat-autocomplete autoActiveFirstOption
    #auto_fieldname="matAutocomplete">
    @for (opt of fieldNameField.options | async; track opt) {
      <mat-option
        (click)="onFieldNameClick(opt)"
        [value]="opt.fieldname">
        {{ opt.fieldname }}
      </mat-option>
    }
  </mat-autocomplete>
</mat-form-field>

My Typescript code looks like this.

this.fieldNameField = this.inputFields.find(fields => fields.key === 'fieldname');

this.fieldNameField.options = this.manageAsIsForm.controls['fieldname'].valueChanges
    .pipe(
      startWith( startWithString = this.isAdding ? '' : 
this.record['fieldname'] ),
      switchMap( (value: any) => this.valueFilter((value), this.fieldNameField) )
    );

The code was working perfectly before the conversion. I will appreciate any help/suggestions. Thanks.