Question

我尝试使用Angularfire的查询集合过滤来自Firestore的数据：https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md我对该方法有点困惑。我已设法通过按钮进行过滤，但我不知道如何重置或删除该过滤器。

过滤和重置所述过滤器的正确方法是什么？

这里我有一个stackblitz：https://stackblitz.com/edit/query-collections-in-angularfire2

到目前为止我的代码：

service.ts

function makeOrderTable(response, username, sesstoken) {
    $(jQuery.parseJSON(JSON.stringify(response))).each(function() {
        var foNum = this['Factory Order#'];
        var pO = this['PO#'];
        var status = this['Status'];
        var shipDate = this['Ship Date'];
        $('.orders tbody').append(
            '<tr class="status-row">'+
                '<td>' + foNum + '</td><td>' + pO  + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
            '</tr>'+
            '<tr class="detail-row hidden-detail">'+
                '<td colspan="4"></td>'+
            '</tr>'
        );
    });
    $(document).ready(function() {
        $('table').on('click', 'tr.status-row', function() {
            var statusRow = $(this);
            var detPane = $(statusRow[0]).closest('tr').next('tr');
            $('.detail-view').addClass('hidden-detail');
            $('.detail-view').removeClass('detail-view');
            detPane.addClass('detail-view');
            detPane.removeClass('hidden-detail');

            if (detPane.find('td').text == '')
            {
                var value = statusRow.find('td:first-child').text();
                postDetails(value, username, sesstoken, detPane.find('td'));
            }
        });
    });
}

myComponent.ts

filterBy() {
  this.avisos = this.afs.collection('avisos', ref => ref.where('categoria','==', 'Vehículos' )).valueChanges()
  return this.avisos;
};

myComponent.html

filtrarData() {
  this.avisos = this.fs.filterBy()
  return this.avisos;
};

Answer 1

在你的firebase服务中，有两种方法，一种是获取没有过滤器的集合，另一种是通过给定的“类别”来过滤集合。

在你的组件中，当初始化（ngOnInit()函数）时，你从服务中调用方法来检索整个集合;然后按钮＆＃39; Vehiculos＆＃39;使用给定的＆＃39;类别＆＃39;触发函数filtrarData()。来自你的服务。

过滤后，如果你想＆＃34;清洁＆＃34;过滤器并返回整个集合，就像让ngOnInit()调用按钮一样简单，然后你的数组this.avisos将再次拥有整个集合：

<强> app.component.ts

  ngOnInit() {
    this.getAvisos()
  }

  getAvisos() {
      this.avisos = this.fs.getDomiciliarios()
  }

  filtrarData() {
      this.avisos = this.fs.filterBy()
  }

然后在 app.component.html ：

组件的html中

<button (click)="getAvisos()" class="btn btn-outline-primary btn-sm mx-1">Clean Filters</button>
<span>Filter by:</span>
<button (click)="filtrarData()" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button>
<hr>

顺便说一下，请注意，不需要在app.component.ts中执行return this.avisos行，只需要服务。

另外，如果你将firebase.service函数标准化一下以获得由＆＃39; categoria＆＃39;过滤的集合会很好。如果你想为多种类型的“条款”调用它，那就是一个参数：

<强> firebase.service.ts

filterBy(categoriaToFilter: string) {
    this.avisos = this.afs.collection('avisos', ref => ref.where('categoria','==', categoriaToFilter )).valueChanges()

    return this.avisos;
};

所以现在在你的 app.component.html 中，您可以拥有类似的内容：

<button (click)="filtrarData('Vehículos')" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button>

<button (click)="filtrarData('Casa')" class="btn btn-outline-primary btn-sm mx-1">Casa</button>

但请注意您的组件 app.component.ts 会包含：

filtrarData(categoriaToFilter: string) {
    this.avisos = this.fs.filterBy(categoriaToFilter)
}

从Firestore whit angularfire过滤数据

1 个答案: