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>

Pengaturan pembuat formulir

this.searchForm = this.fb.group({
      search: ['', Validators.required],
    });
this.afs.collection<any>('name', ref => ref.where('name', '==', name));

Sepertinya saya tidak dapat membuat bilah pencarian ini. Idenya adalah bahwa untuk setiap perubahan nilai bidang input, kueri firestore diubah menjadi pencarian 'products/{id}' untuk mengambil semua produk yang namanya nilai Brian. Sepertinya saya tidak dapat secara akurat membuat kode yang akan mengisi li di bawah bidang pencarian dengan materi yang relevan dari kueri.

Bantuan apa pun akan sangat dihargai ... haruskah saya berlangganan konten bidang input dan kemudian memperbarui kueri dari dalam badan langganan?

1
Benjamin Hobson 30 Oktober 2019, 03:04

1 menjawab

Jawaban Terbaik

Anda tidak benar-benar membutuhkan formulir reaktif untuk ini. Hanya menggunakan [(ngModel)] akan berfungsi dengan baik.

Di sini, cobalah ini:

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

Dan di Kelas Komponen Anda:

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: Saya mencoba membuat StackBlitz untuk mendemonstrasikan kode, tetapi saya mengalami masalah dengan instalasi ketergantungan firebase. Saya akan memperbarui ini dengan demo segera setelah berhasil untuk saya.

1
SiddAjmera 30 Oktober 2019, 00:30