Javascript 如何过滤可观察阵列？

我试图通过单击按钮并调用方法来过滤db firebase中的字符串数组。我的问题是什么都没有发生

我做错了什么

服务

images: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
   this.images = this.db.list("/images").valueChanges();

  }

图像：可见；
构造函数（专用数据库：AngularFireDatabase）{
this.images=this.db.list（“/images”）.valueChanges（）；
}

组成部分

images: Observable<any[]>;

  constructor(private firebase: FirebaseService) {
    this.images = firebase.images;

  }

  loadImages(category: string) {
    return this.images.subscribe(x => x.filter(x => x === category))
  }

图像：可见；
构造函数（专用firebase:FirebaseService）{
this.images=firebase.images；
}
loadImages（类别：字符串）{
返回this.images.subscribe（x=>x.filter（x=>x==category））
}

html

过滤器
{{image}

firebase数据库：

---

[image1、image2、image3、image4]-仅针对测试，而不是服务中的构造函数方法，您可以创建一个新方法，该方法将返回图像数据

服务：

getImages() {
    return this.db.list("/images").valueChanges();
}

---

在组件中，您可以调用服务方法

getImages（）

而不是服务中的构造函数方法，您可以创建一个新方法来返回图像数据

服务：

getImages() {
    return this.db.list("/images").valueChanges();
}

---

在组件中，您可以调用服务方法

getImages（）

问题是，如果您确实试图按类别字符串中的任何内容进行筛选，那么简单的字符串比较总是会导致false。以此为例

const x = ['image1', 'image2', 'image3', 'image4'];
console.log(x.filter(x => x === 'image'));
// Resulting log will be an Array wtih length 0 because image1 !== image

但是，如果要查找字符串的子字符串，则可以查看类别是否为字符串的子字符串

const x = ['image1', 'image2', 'image3', 'image4'];
console.log(x.filter(x => x.includes('image')));

---

无论是否可见，订阅的最终结果都是实际数据，您可以在这些数据上运行筛选器。

问题是，如果您确实试图按类别字符串中的任何内容进行筛选，则简单的字符串比较总是会导致false。以此为例

const x = ['image1', 'image2', 'image3', 'image4'];
console.log(x.filter(x => x === 'image'));
// Resulting log will be an Array wtih length 0 because image1 !== image

但是，如果要查找字符串的子字符串，则可以查看类别是否为字符串的子字符串

const x = ['image1', 'image2', 'image3', 'image4'];
console.log(x.filter(x => x.includes('image')));

---

无论是否可观察，订阅的最终结果都是实际数据，您可以在其上运行筛选器。

您可以使用地图操作符的可观察来显示数据。参考这篇stackblitz，为了演示，我用一个包含字符串数组的Observable替换了数据库检索：

服务：

retrieveImages(): Observable<any> {
  // replace with firebase call this.db.list("/images").valueChanges();
  return of(['image1', 'image2', 'image3', 'image4']);
}

retrieveImages（）：可观察{
//替换为firebase调用此.db.list（“/images”）.valueChanges（）；
返回（['image1'、'image2'、'image3'、'image4']）；
}

组成部分：

public images$: Observable<any>;

constructor(private firebase: FirebaseService) {
  ;
}

ngOnInit() {
  this.loadImages('image1');
}

loadImages(category: string) {
  this.images$ = this.firebase.retrieveImages().pipe(
    map(x => x.filter(x => x === category))
  );
}

公共图像$：可见；
构造函数（专用firebase:FirebaseService）{
;
}
恩戈尼尼特（）{
这是loadImages（'image1'）；
}
loadImages（类别：字符串）{
this.images$=this.firebase.retrieveImages（）.pipe(
映射（x=>x.filter（x=>x==category））
);
}

html:

过滤器1
过滤器2
过滤器3
过滤器4
{{image}

您可以使用地图操作符的Observable来显示数据。参考这篇stackblitz，为了演示，我用一个包含字符串数组的Observable替换了数据库检索：

服务：

retrieveImages(): Observable<any> {
  // replace with firebase call this.db.list("/images").valueChanges();
  return of(['image1', 'image2', 'image3', 'image4']);
}

retrieveImages（）：可观察{
//替换为firebase调用此.db.list（“/images”）.valueChanges（）；
返回（['image1'、'image2'、'image3'、'image4']）；
}

组成部分：

public images$: Observable<any>;

constructor(private firebase: FirebaseService) {
  ;
}

ngOnInit() {
  this.loadImages('image1');
}

loadImages(category: string) {
  this.images$ = this.firebase.retrieveImages().pipe(
    map(x => x.filter(x => x === category))
  );
}

公共图像$：可见；
构造函数（专用firebase:FirebaseService）{
;
}
恩戈尼尼特（）{
这是loadImages（'image1'）；
}
loadImages（类别：字符串）{
this.images$=this.firebase.retrieveImages（）.pipe(
映射（x=>x.filter（x=>x==category））
);
}

html:

过滤器1
过滤器2
过滤器3
过滤器4
{{image}

尝试将其设置为images:Observable以将其设置为images:Observable