since cities is neither a promise nor an observable the async pipe can’t be used

<mat-option *ngFor="let cityDestination of cities | async" [value]="cityDestination.cityId">

// correct
<mat-option *ngFor="let cityDestination of cities" [value]="cityDestination.cityId">

so you should either remove the async pipe or bind it to something that is async like an observable

I am new in angular…
I get this exception for the following code, and I frustrated about it.

The error message :

error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type ‘City[]’ is not assignable to parameter of type ‘Promise’.
Type ‘City[]’ is missing the following properties from type ‘Promise’: then, catch,
[Symbol.toStringTag], finally

This is my class:

export class City{
    cityId:number;
    cityName:string; }

and this is the typeScript:

export class AddFlightComponent implements OnInit {
  cities:City[]=[];
  filteredOptionsD: Observable<City[]>;

  addFlightForm_FormGroup=new FormGroup({
    destinationName:new FormControl()
  });

  private _filterD(value: string): City[] {
    const filterValueD = value.toLowerCase();
    return this.cities.filter(option => option.cityName.toLowerCase().indexOf(filterValueD) === 0);
  }

func()
{
  this.filteredOptionsD = this.addFlightForm.controls['destinationName'].
  valueChanges
  .pipe(
    startWith(''),
    map(value => this._filterD(value))
  );
}

and this is my html:

<mat-form-field>
  <input type="text" placeholder=" עיר יעד" aria-label="Number" matInput formControlName="destinationName" [matAutocomplete]="auto">
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    <mat-option *ngFor="let cityDestination of cities | async" [value]="cityDestination.cityId">
      {{cityDestination.cityName}}
    </mat-option>
  </mat-autocomplete>