0

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.

1 Resposta 1

0

Para resolver, tive que mudar o pensamento. Primeiro, como precisava usar HTTP para que eu pudesse ir ao banco para pesquisar o termo informado, usando como base o código disponível no site do material angular, adaptei para a seguinte rotina:

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)))
);

};

E tem um detalhe, no meu HTML tenho vários autocompletes, então, lembre-se de trocar o nome de cada um informando um nome mais amigável, como abaixo:

 <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .