Angular 7 autocomplete with http

Question

I have in my project a field that I need to use the autocomplete. But it’s not working. Could someone help me?

Component

filteredCostCenter: Observable<CentroCusto[]>;
ngOnInit() {
    this.filteredCostCenter = this.form.controls.centroCustoId.valueChanges.pipe(
  startWith(null),
  debounceTime(200),
  distinctUntilChanged(),
  switchMap(value => {
     return this.searchCostsCenters(value || '')
  })
);
}

  private searchCostsCenters(value: string): Observable<CentroCusto[]> {


return this.centroCustoService.getWithPages(1,30,'id','asc', value).pipe(
  map(response => response.results.filter(opt => {
    return opt.nome.toLowerCase().indexOf(value.toLowerCase())
  })
));

};

HTML

   <mat-form-field class="app-form-control inputPadding">
                            <input type="text" matInput placeholder="Centro de Custo" formControlName="centroCustoId"
                                aria-label="Number" [matAutocomplete]="auto">
                            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                <mat-option *ngFor="let result of filteredCostCenter | async" [value]="result">
                                    {{ result }}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>

Using this way, it does not work at all. I did it based on the example that exists on the angular material site.

Answer 1

To solve it, I had to change my mind. First, how I needed to use HTTP so I could go to the bank to search for the informed term, using as a basis the code available on the angular material, I adapted to the following routine:

this.filteredCostCenter = this.form.controls.centroCustoId.valueChanges.pipe(
  startWith(null),
  debounceTime(200),
  distinctUntilChanged(),
  switchMap(value => this.searchCostsCenters(value))
);
  private searchCostsCenters(value: string): Observable<CentroCusto[]> {

return this.centroCustoService.getWithPages(1,30,'id','asc', value).pipe(
  map(response => response.results.filter(option => option.nome.toLowerCase().includes(value)))
);

};

And there is a detail, in my HTML I have several autocompletes, so remember to change the name of each one by stating a friendlier name, as below:

 <mat-form-field class="app-form-control inputPadding">
                            <input matInput aria-label="Centro de Custo" placeholder="Centro de Custo" formControlName="centroCustoId"
                                [matAutocomplete]="autoCentroCusto">
                            <mat-autocomplete autoActiveFirstOption #autoCentroCusto="matAutocomplete">
                                <mat-option *ngFor="let result of filteredCostCenter | async" [value]="result.nome">
                                    {{ result.nome }}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>