javascript - 无法完成实时搜索查询

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>

表单生成器设置

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

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

我似乎无法创建此搜索栏。这个想法是，对于输入字段值的每次更改，firestore 查询都会更改为搜索“products/{id}”以检索名称值为 Brian 的所有产品。我似乎无法准确地创建将使用查询中的相关 Material 填充搜索字段下方的 li 的代码。

非常感谢任何帮助...我应该订阅输入字段内容，然后从订阅正文中更新查询吗？

Answer 1

你真的不需要 react 形式。只需使用 [(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 依赖项时遇到了问题。一旦对我有用，我会用演示更新它。