Solution 1 :

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

Problem :

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{
    cityName:string; }

and this is the typeScript:

export class AddFlightComponent implements OnInit {
  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);

  this.filteredOptionsD = this.addFlightForm.controls['destinationName'].
    map(value => this._filterD(value))

and this is my html:

  <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">


Leave a Reply

Your email address will not be published. Required fields are marked *