[Projeto] Desafio - Resolução

Prezados,

Como muitos outros, também tive problema na hora de realizar o desafio. Abaixo deixo uma sugestão dos passos de como implementei a resolução levando em consideração como foi deixado o projeto na aula "Dropdown de origem e destino".

No arquivo dropdown-uf.component.ts:

1. Realize as importações abaixo.

import { map, Observable, startWith } from 'rxjs';

1. Crie uma variável para representar o input do html.

   @Input() control!: FormControl;

2. Altere o tipo de do atributo das opções de filteredOptions = []; para filteredOptions!: Observable<UnidadeFederativa[]>;.

3. Crie o método abaixo para realizar o filtro dos estados.

private _filter(value: string): UnidadeFederativa[] {
    const filterValue = value?.toLowerCase();

    return this.unidadesFederativas.filter((estado) =>
      estado.nome.toLowerCase().includes(filterValue)
    );
  }

1. No método ngOnInit, após listar as opções de estado, inclua o código abaixo.

    this.filteredOptions = this.control.valueChanges.pipe(
      startWith(this.control.value),
      map((value) => {
        return this._filter(value as string);
      })
    );

No arquivo dropdown-uf.component.html:

1. Vincule a variável criada (control) no input do layout html.

2. Devolva o | async retirado em aulas anteriores no loop.

1. Acrescente o atributo nome no objeto que está sendo mostrado.

<mat-option [value]="option.nome">{{ option.nome }}</mat-option>

No arquivo form-busca.component.html:

1. Nos campos de origem e Destino acrescenta o input do campo correto.

Obs: Apenas enumerei os passos que realizei para resolver os desafios, há aguns conceitos que não foram abordados que requerem estudos a parte para uma melhor compreensão.