Автозаполнение Angular Mat не отображает / не показывает выпадающий список возвращенного объекта из Back End

Question

Я попытался реализовать автозаполнение матов (Angular Material), и код .TS работает и возвращает данные из моего внутреннего интерфейса API. НО автозаполнение не показывает объект автоматически в выпадающем списке.

Следуйте за моим кодом:

export class VendaComponent implements OnInit {

  public produtoAutoComplete: Observable<Produtos> = null;
  public vendaForm = new FormControl();
  vendas: Venda[] = [];
  produtos:Produtos;
  isLoading = false;

  constructor(private vendasService: VendaService, private produtoService: ProdutoService, private toastr: ToastrService) { }

  lookup(value: string): Observable<Produtos> {
    return this.produtoService.search(value.toLowerCase()).pipe(
      // map the item property of the github results as our return object
      map(results => results.produtos),
      // catch errors
      catchError(_ => {
        return of(null);
      })
    );
  }
 
  ngOnInit() {
    this.produtoAutoComplete = this.vendaForm.valueChanges.pipe(
      startWith(''),
      // delay emits
      debounceTime(300),
      //map(options => options ? this.filter(options) : this.produtos.slice())      
      switchMap(value => {
        if (value !== '') {
          // lookup from github
          return this.lookup(value);
        } else {
          // if no value is pressent, return null
          return of(null);
        }
      })
    );
  }

Сервисный код:

const API_URL = environment.apiUrl;

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }), responseType: 'text' as 'json'
};


@Injectable({
  providedIn: 'root'
})
export class ProdutoService {
  private produtoUrl = API_URL + 'produto/';  // URL to web api
  dataChange: BehaviorSubject<Produto[]> = new BehaviorSubject<Produto[]>([]);
  // Temporarily stores data from dialogs
  dialogData: any;
  produtos: Produto[] = [];
  constructor(private httpClient: HttpClient) { }

И мой HTML:

 <form class="example-form">
          <mat-form-field floatLabel="never">
            <input matInput type="text" aria-label="Number" matInput [formControl]="vendaForm" [matAutocomplete]="auto">

            <mat-placeholder class="placeholder">Search</mat-placeholder>

            <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let option of produtoAutoComplete | async" [value]="option.descProduto">
                {{option.descProduto}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>

Я все перепробовал, следую тысячам примеров и ничего не работает. Как я уже сказал, служба работает и возвращает мой JSON, моя проблема, когда я пытаюсь отобразить результат.

Answer 1

через много часов я нашел решение этого вопроса.

TS компонента:

export class VendaComponent implements OnInit {

  public vendaForm = new FormControl();
  vendas: Venda[] = [];
  results: any[];
  isLoading = false;

  constructor(private vendasService: VendaService, private produtoService: ProdutoService, private toastr: ToastrService) { }

  ngOnInit() {
    this.vendaForm.valueChanges.subscribe(
      term => {
        if (term != '') {
          this.produtoService.search1(term).subscribe(
            data => {
              this.results = data as any[];
              console.log(data);
            })
        }
      })
  }

Служба данных:

search1(term) {
    const params = new HttpParams()
      .set('descProduto', term)
      .set('codigoBarras', '123');//Hardcode parameter just for tests
      var listOfBooks= this.httpClient.get(this.produtoUrl + 'busca/', { params })
      .pipe(
        debounceTime(500),  // WAIT FOR 500 MILISECONDS ATER EACH KEY STROKE.
        map(
          (data: any) => {
            return (
              data.length != 0 ? data as any[] : [{ "Produto": "No Record Found" } as any]
            );
          }
        ));
    return listOfBooks;
  }

HTML для отображения автозаполнения материала:

<form>
          <mat-form-field class="container">

            <!-- ADD AN INPUT BOX OF TYPE TEXT AND LINK IT TO THE AUTO COMPLETE PANEL. -->
            <input type="text" placeholder="Procure Produtos ..." matInput [formControl]="vendaForm" [matAutocomplete]="auto">

            <!-- CREATE AUTO COMPLETE PANEL WITH OPTIONS. -->
            <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let result of results" [value]="result.descProduto">
                {{ result.descProduto }}
              </mat-option>
            </mat-autocomplete>

          </mat-form-field>
        </form>

Надеюсь, это кому-нибудь поможет.