无法完成实时搜索查询

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 的所有产品。我似乎无法准确地创建代码，用来自查询的相关材料填充搜索字段下方的 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 依赖项时遇到了问题。我会尽快通过演示更新它。