过滤Firestore传递变量

Question

我在Firestore中具有以下结构：

eventos:
  eventoID1: {
    titulo: "titulo1"
    categoria: "categoria1"
  }
  eventoID2: {
    titulo: "titulo2"
    categoria: "categoria2"
  }

categorias:
  categoriaID1: {
    nombre: "categoria1"
  }
  categoriaID2: {
    nombre: "categoria2"
  }
  categoriaID3: {
    nombre: "categoria3"
  }

我正在使用AngularFire2。我需要通过一个按钮为每个类别创建一个过滤器，如下所示：

我设法创建了过滤器，但是我无法传递每个按钮名称的变量。我有20个类别，是否必须为每个类别创建20个功能？

service.ts

getCategorias() {
    this.categorias = this.afs.collection('categorias', ref => ref.
    orderBy('nombre', 'asc')).valueChanges();
    return this.categorias;
  }

getEventosAll() {
    this.eventos = this.afs.collection('eventos').snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Evento;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.eventos;
  }

 filterEventos(categoria: string) {
    this.byCategorias = this.afs.collection('eventos', ref => ref
    .where('categoria', '==', categoria)
    ).snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Evento;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.byCategorias;
  }

component.ts

ngOnInit() {
    this.eventos = this.fs.getEventosAll();
    this.categorias = this.fs.getCategorias();
  }

filtrarEventos(categoria) {
    this.eventos = this.fs.filterEventos(categoria);
  }

component.html

<button class="btn btn-outline-primary" *ngFor="let categoria of categorias | async" (click)="filtrarEventos()">
   {{categoria.nombre}}
</button>

<div *ngFor="let evento of eventos | async">
  <h6>{{ evento.titulo }}</h6>
</div>