-1

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

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

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

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

在此处输入图像描述

4

1 回答 1

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>
  1. 你model的任何你想搜索的东西
export interface Movies {
    name: string;
    category: string;
}
  1. 处理selector 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;
        });
于 2021-01-09T21:37:30.810 回答