Javascript 从角度Firestore中过滤可观测数据

我已经看到了一些将过滤器应用于数据库调用的答案。我只需要调用数据库一次，但无法确定如何过滤Firebase返回的可观察对象中的数组

我有两个带有标签列表的选择框。我想从Firestore获取整个项目集，并将其存储在可观察的项目中。然后，当其中一个选择框发生变化时，我想过滤可观察到的内容，以便只显示带有这些标记的项目

items: Observable<any[]>;
  selectedTag1;
  selectedTag2;

  filteredItems: Observable<any[]>;

  tagName1 = ['', 'TAG1', 'TAG2', 'TAG3', 'TAG4'];
  tagName2 = ['', 'TAG5', 'TAG6', 'TAG7',

  constructor(db: AngularFirestore) {
  this.items = db.collection('items').valueChanges();
  }

  ngOnInit() {
    this.filteredItems = this.items.pipe(
      map((arr => arr.filter(item =>
        item.tags.some(s => s === this.selectedTag1) &&
        item.tags.some(s => s === this.selectedTag2))
        )));
  }

我尝试添加一个函数，该函数在选择框更改时运行

selectChanges() {
    this.filteredItems = this.items.pipe(
      map((arr => {
        console.log(arr);
        console.log(this.selectedTag1);
        arr.filter(item => {
        console.log(item.tags);
        item.tags.some(s => s === this.selectedTag1);} );
      })));
  }

---

但是我仍然没有得到任何筛选结果。

正如您已经猜到的，当所选标记未定义或为空时，您不应该进行筛选。只需调整过滤逻辑，如下所示：

filter（）{
this.filteredItems=this.items.pipe(
映射（arr=>
arr.filter（项目=>{
//如果selectedTag1或selectedTag2为空，则返回true
const matchesForTagName1=this.selectedTag1
？item.tags.indexOf（此.selectedTag1）>=0
：正确；
const matchesForTagName2=this.selectedTag2
？item.tags.indexOf（此.selectedTag2）>=0
：正确；
返回matchesForTagName1和matchesForTagName2；
})
)
);
}

---

您可以在Stackblitz中查看完整的示例。

也可以发布您的html，您还可以登录您在

项目上获得的内容。

添加了html和项目。谢谢。但是Stackblitz没有过滤项目…@Bwizard不过滤项目是什么意思？它对我有用。很抱歉，我已经在两个浏览器中试用过了，但都不起作用。我不知道为什么。这里有一个@Bwizard更新的stackblitz应用程序。经过铬合金测试，现在可以使用了。以前，它与Firefox配合得很好。Wierd broswer实现。完美。非常感谢您抽出时间！

[
  {
    "name": "Item 1",
    "tags": [
      "TAG1",
      "TAG4",
      "TAG5",
      "TAG6"
    ]
  },
  {
    "name": "Item 2",
    "tags": [
      "TAG2",
      "TAG3",
      "TAG5",
      "TAG7",
    ]
  }
]

selectChanges() {
    this.filteredItems = this.items.pipe(
      map((arr => {
        console.log(arr);
        console.log(this.selectedTag1);
        arr.filter(item => {
        console.log(item.tags);
        item.tags.some(s => s === this.selectedTag1);} );
      })));
  }