фильтр противопожарной проходной переменный - PullRequest
Новая
       8

фильтр противопожарной проходной переменный

0 голосов
/ 06 апреля 2019

У меня есть следующая структура в Firestore: 

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

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

Я использую AngularFire2.Мне нужно создать фильтр для каждой категории с помощью кнопки, что-то вроде этого: enter image description here

Мне удалось создать фильтр, но я не могу передать переменную именикаждая кнопка.У меня есть 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>
...