I have the following in my template

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayTrial">
    @for (trial of trials | async; track trial) {
    <mat-option [value]="trial">{{trial.descripcion}}</mat-option>
    }
</mat-autocomplete>

When I add the async pipe I get the following error on it

Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator.

I use es2022 on my tsconfig:

"lib": [
  "ES2022",
  "dom",
]

Why am I getting this error? I’m trying to implement a mat-autocomplete and the code is identical as far as I can tell.

I don’t think it’s relevant but just in case here is the code:

  resultsAndReportsForm: FormGroup = new FormGroup({
    trial: new FormControl(''),
    process: new FormControl(''),
    startDate: new FormControl(''),
    endDate: new FormControl(''),
  });

  trials: Trial[] = [];
  filteredTrials: Observable<Trial[]> = new Observable<Trial[]>();

  constructor(
    private listService: ListService
  ) {
    this.listService.getTrials().subscribe((data) => {
      this.trials = data;
    });

    this.filteredTrials = this.resultsAndReportsForm.controls["trial"].valueChanges.pipe(
      startWith(''),
      map(value => {
        const descripcion = typeof value === 'string' ? value : value?.descripcion;
        return descripcion ? this._filterTrial(descripcion as string) : this.trials.slice();
      }),
    );
  }

  displayTrial(trial: Trial): string {
    return trial && trial.descripcion ? trial.descripcion : '';
  }

  _filterTrial(description: string): Trial[] {
    const filterValue = description.toLowerCase();

    return this.trials.filter(trial => trial.descripcion.toLowerCase().includes(filterValue));
  }