Как вызвать удаленные данные с мат-автозаполнением и угловым 5

Question

У меня есть форма с компонентами mat-autocomplete и mat-chip-list. Он отлично работает со статическими данными, которые у меня есть в массиве. Но когда я пытаюсь загрузить данные удаленно из службы, у меня появляется ошибка:

this.carCtrl.valueChanges.startWith is not a function

Вот мой код в контроллере:

import { startWith } from 'rxjs/operators/startWith';
import { map} from 'rxjs/operators/map';

cars: Car[] = [{ id: 1, brand: "honda"}, { id: 2, brand: "toyota"}];

constructor(public dialogRef: MatDialogRef<DialogForm>, @Inject(MAT_DIALOG_DATA) public data: any, public formBuilder: FormBuilder, private carService: CarService) {

 // It gives me the error mentionned above
this.carCtrl.valueChanges
.startWith(null)
.subscribe(val => {
  if (val && typeof val !== 'object') {
    this.carService.getCars(this.search).subscribe(cars=> {
      this.filteredCars = cars;
    });
  }
});

// this Works with a static array
this.filteredCars = this.carCtrl.valueChanges.pipe(
  startWith(null),
  map((car: Car | null) => this.cars.slice()));

И мой шаблон:

<input placeholder="Add cars..."
       #carInput
       [formControl]="carCtrl"
       [matAutocomplete]="autoCars"
       [matChipInputFor]="chipEbomList"
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       [matChipInputAddOnBlur]="addOnBlur"
       (matChipInputTokenEnd)="add($event,'car')">