使用Angular+Firestore(firebase)在按钮上搜索(非即时搜索)

Question

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

1. 你在这里有关于seacrh的资源吗；消防仓库
2. 有没有合适的教程来实现youtube上的搜索按钮

我真的需要在按钮上进行搜索(而不是即时搜索(，因为我搜索的所有来源都使用即时搜索。请帮助我，如果有人可以从youtube上为按钮搜索做一个解释教程。谢谢大家：(

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

在此处输入图像描述

Answer 1

请放一些代码，但这应该在下面的三个步骤中直接完成。这是一个参考搜索或CRUD样本，带有搜索和保存

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>

---

2. 您想要搜索的model

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

---

3. 处理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;
});