angular5 - mat-autocomplete と angular 5 を使用してリモート データを呼び出す方法

Question

mat-autocomplete および mat-chip-list コンポーネントを含むフォームがあります。配列にある静的データで正常に動作します。しかし、サービスからリモートでデータをロードしようとすると、エラーが発生します:

this.carCtrl.valueChanges.startWith is not a function

Controller の私のコードは次のとおりです。

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