使用 Angular + Firestore (firebase) 搜索按钮（不是即时搜索）

Question

这里我有一个网站项目，稍后将实现按钮搜索（不是即时搜索）。我是 Angular 框架和 Firestore 的新手。我在 YouTube 上搜索了各种教程，所有教程都在 Angular / Firestore 上使用即时搜索。因为我不明白网站上的解释，所以我一直在寻找 YouTube 上的教程。我的问题是：

1. 您是否有任何资源可用于 seacrh on button with angular & firestore？
2. 有没有合适的教程来实现 youtube 上的搜索按钮？

我真的需要在按钮上进行搜索（不是即时搜索），因为我搜索的所有来源总是使用即时搜索。如果有人可以通过 youtube 的解释为 BUTTON SEARCH 制作教程，请帮助我。谢谢大家:)

这是我的项目网址：https://skripsi-pwa-opac.web.app/

enter image description here

Answer 1

请输入您的一些代码，但这应该在下面的三个步骤中直接进行。这是一个参考只是Search 或CRUD sample with search and save

1. 在您的角度模板内创建一个按钮。下面你有drop down select 这样--SearchAppComponent.html：

<ul>
    <li class="text" *ngFor="let movies of moviess | async">
        <a href="#" (click)="selectMovies(movies)">{{movies.name}}</a>
    </li>
</ul>
<div>Selected Movies: {{myMovies?.name}}</div>
<button (click)="updateSelectedMovies()">Update Movies</button>

---

1. 您的model，无论您想搜索什么

export interface Movies {
    name: string;
    category: string;
}

---

1. 处理 select 或 click event，在您的 selectChanges 事件中，或在您的 searchappcomponent.ts 文件中的按钮单击事件

async selectMovies(movies: Movies) {

     const snapshotResult = await this.db.collection('movies', ref =>
        ref.where('name', '==', movies.name)
           .limit(1))
           .snapshotChanges()
           .pipe(flatMap(moviess => movies)); 

        snapshotResult.subscribe(doc => {
            this.myMovies = <Movies>doc.payload.doc.data();
            this.moviesRef = doc.payload.doc.ref;
        });