如何使用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')">