Question

我在Firestore filterByDepartamentos中有一个过滤器，我在使用mat-select，该过滤器可以很好地与我的选项配合使用。

现在，我要在mat-select中包含第一个选项以返回到初始状态，这可以使用带有(click) ="ngOnInit()"的按钮来完成，但是如何使用垫-选择？

有什么方法可以实现？

service.ts

getEventosAll() {
    this.eventos = this.afs.collection('eventos', ref => ref
    .where('fechaTermino', '>=', this.today)
    .orderBy('fechaTermino', 'asc')
    ).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;
  }

filterByDepartamentos(departamento) {
  const byDepartamentos = this.afs.collection('eventos', ref => ref
  .where('departamento', '==', departamento)
  ).valueChanges();
  return byDepartamentos;
}

component.ts

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

filtrarDepartamento(departamento) {
  this.selectedDepartamento = departamento;
  this.eventos = this.fs.filterByDepartamentos(departamento);
}

component.html

<mat-form-field appearance="outline" class="col-6">
  <mat-label>Departamento</mat-label>
  <mat-select [(ngModel)]="selectedDepartamento" (ngModelChange)="filtrarDepartamento(selectedDepartamento)">
    <mat-option [ngValue]="null">Todos</mat-option>
    <mat-option *ngFor="let departamento of departamentos | async" [value]="departamento.nombre"> {{ departamento.nombre }}
      </mat-option>
  </mat-select>
</mat-form-field>

选择第一个选项返回过滤器Firestore

0 个答案: