Question

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

我在做什么错了？

服务

<script type="text/javascript">
    $('document').ready(function(){
        $('#btn-vote-up' + <?= $pst_id ?>).on("click", function(e){
           var data= $(this).data('params');
            $.ajax({
                type: "POST",
                data: data,
                success: function(msg) {
                    console.log (<?= $pst_id ?>);
                    $('#note-up' + <?= $pst_id ?>).load(' #note-up' + <?= $pst_id ?>);
                }               
            });
            e.preventDefault();
        });
    });
</script>

组件

images: Observable<any[]>;

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

  }

html

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数据库：

[image1，image2，image3，image4]-仅用于测试

Answer 1

问题是，如果确实要按类别字符串中的任何内容进行过滤，则简单的字符串比较将始终导致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')));

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

Answer 2

您可以将Observable与地图运算符一起使用以显示数据。参考这个堆栈闪电，我用一个包含字符串数组的Observable替换了数据库检索，以进行演示：

https://stackblitz.com/edit/load-and-filter-from-service

服务：

retrieveImages(): Observable<any> {
  // replace with firebase call this.db.list("/images").valueChanges();
  return of(['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))
  );
}

html：

<button (click)="loadImages('image1')" >Filter 1</button>
<button (click)="loadImages('image2')" >Filter 2</button>
<button (click)="loadImages('image3')" >Filter 3</button>
<button (click)="loadImages('image4')" >Filter 4</button>
<div *ngFor="let image of (images$ | async)">
    <h2>{{image}}</h2>
</div>

Answer 3

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

服务：

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

在组件中，您可以调用服务方法getImages()。

如何过滤可观察数组？

3 个答案: