Tenho em meu projeto um campo que preciso usar o autocomplete. Mas ele não está funcionando. Alguém poderia me ajudar?
Componente
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>
Usando dessa forma, não funciona de maneira nenhuma. Fiz com base no exemplo que existe no site do material angular.