Не удается выполнить поисковый запрос в реальном времени

Question

HTML

<form [formGroup]="searchForm" onsubmit="return false" id="searchField" ng-submit="" \">
      <input type="text" placeholder="Search" formControlName="search" (keyup)="updateQuery()"/>

      <li *ngFor="let product of querySearch | async">
        {{ product.name }}
      </li>

</form>

Настройка Formbuilder

this.searchForm = this.fb.group({
      search: ['', Validators.required],
    });

this.afs.collection<any>('name', ref => ref.where('name', '==', name));

Не получается создать эту панель поиска. Идея состоит в том, что для каждого изменения значения поля ввода запрос пожарного хранилища изменяется на поиск 'products / {id}', чтобы получить все продукты, имя которых имеет значение Brian. Я не могу точно создать код, который будет заполнять li под полем поиска релевантным материалом из запроса.

Любая помощь будет принята с благодарностью ... я должен подписаться на содержимое поля ввода и затем обновить запрос в теле подписки?

Answer 1

Вам не нужна реактивная форма для этого. Просто использование [(ngModel)] будет работать просто отлично.

Вот, попробуйте:

<input type="text" placeholder="Search" [(ngModel)]="search" (keyup)="updateQuery()"/>
<ul>
    <li *ngFor="let product of results$ | async">
        {{ product.name }}
    </li>
</ul>

А в вашем классе компонентов:

import { Component } from "@angular/core";
import { AngularFirestore, AngularFirestoreCollection } from "@angular/fire/firestore";
import { Observable } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  results$: AngularFirestoreCollection<any>;
  search = '';

  constructor(private afs: AngularFirestore) {}

  ...

  updateQuery() {
    this.results$ = this.afs.collection<any>("items", ref =>
      ref.where("name", "==", this.search)
    );
  }
}

PS: Я пытаюсь создать StackBlitz для демонстрации кода, но у меня проблема с установкой зависимостей firebase. Я обновлю это демо, как только у меня получится.