Javascript 无法完成实时搜索查询

HTML

this.afs.collection（'name'，ref=>ref.where（'name'，'='，name））；

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

---

任何帮助都将不胜感激。。。我是否应该订阅输入字段内容，然后从订阅正文中更新查询？

对此，您实际上不需要反应式表单。只要使用

[（ngModel）]

就可以了

在这里，尝试一下：

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

{{product.name}

在组件类中：

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

从“@angular/core”导入{Component}；
从“@angular/fire/firestore”导入{AngularFirestore，AngularFirestoreCollection}；
从“rxjs”导入{observeable}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
结果$：AngularFirestoreCollection；
搜索=“”；
构造函数（专用afs:AngularFirestore）{}
...
updateQuery（）{
this.results$=this.afs.collection（“items”，ref=>
ref.where（“name”，“==”，this.search）
);
}
}

---

PS:我正试图创建一个StackBlitz来演示代码，但我在firebase依赖项安装方面遇到了问题。我会尽快用一个演示来更新它。

所以问题中有一些遗漏。您如何存储afs查询中的搜索响应，您拥有的

名称

属性是什么，为什么它与您最终将以反应形式作为值的

搜索

属性不同？谢谢。。。我不能因为我的名誉而投票，但是勾选了别担心，伙计。很高兴我能帮忙：）

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

<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)
    );
  }
}