Почему мой угловой фильтр не работает с полученной базой данных? - PullRequest
Новая
       27

Почему мой угловой фильтр не работает с полученной базой данных?

0 голосов
/ 01 ноября 2019

У меня есть список предметов, и у каждого предмета есть несколько тегов. У меня также есть список флажков тегов, которые пользователь может установить для фильтрации элементов, содержащих эти теги.

Я хочу работать с необработанными наблюдаемыми, используя асинхронную подписку, а не вручную, и я заставил это работать, как вы можете видеть в моем плункере ...

массив тегов элемента фильтра сфлажки и наблюдаемые

Однако в реальном мире мне нужно получить список флажков из firebase, и когда я это делаю, вдруг они не могут их отфильтровать. Данные в обеих наблюдаемых (созданные вручную и из Firebase) идентичны, поэтому я запутался, почему он не работает. Я думал только, что это может иметь какое-то отношение к тому факту, что получение их из firebase означает, что они извлекаются асинхронно, а не мгновенно создаются?

мой код компонента: 

 ngOnInit() {
    this.items$ = this.itemService.getItemsList();

    // getting observable array from firebase is not working when it hits checked()
     this.filterItems$ = this.tagsService.getTagCheckboxes();

    // manually creating same observable array manually is working with checked(), but why?
     // this.filterItems$ = of([ {value: 'red', checked: false}, {value: 'black', checked: false}, {value: 'cute', checked: false}, ]);

    this.inboxSideNavInit();
    this.messages = this.inboxService.messages;
  }

  ngOnDestroy() {
    if(this.screenSizeWatcher) {
      this.screenSizeWatcher.unsubscribe()
    }
  }

  checked() {
  
    console.log('checked'); // this shows in console with firebase observable
    return this.filterItems$.pipe(map(val => {
      console.log('val:', val); // this doesnt show in console with firebase observable
      return val.filter(item => {
        console.log('item: ', item);
        return item.checked
      })
    }));
  }

Мой HTML: 

      <mat-accordion>
        <mat-expansion-panel *ngFor="let item of items$ | async | tagFilter: { tags: ''} : checked()" hideToggle="true">
          <mat-expansion-panel-header>
            <mat-panel-title>

мой фильтр код: 

import { Pipe, PipeTransform } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { TagCheckbox } from 'app/views/tags/tags.service';
import { Item } from 'app/views/items/item.service';

@Pipe({ name: 'tagFilter' })
export class TagFilterPipe implements PipeTransform {
  transform(items$: Observable<Item[]>, filter: any, filterItems$: Observable<Array<TagCheckbox>>): any {
    let checkedItemsArray = [];
   
    if (filter && Array.isArray(items$) && filterItems$) {
      let filterKeys = Object.keys(filter); // ['tags']
      let checkedItems$ = filterItems$.pipe(map(val => val.filter(item =>
        {
          console.log('item: ', item);
          return item.checked;
        })));

      checkedItems$.subscribe(checked => {
        return checkedItemsArray = checked;
      })

      if (checkedItemsArray.length === 0) { return items$; }

      return items$.filter(item => {
        return item.tags.some(function(currentValue, index, arr){
            return checkedItemsArray.find(o => o.value === currentValue);
        }, this);
      })
    } else {
      return items$;
    }
  }
}

рабочий результат с созданной вручную наблюдаемой

фильтрация не работает с идентичной видимой базой данных, наблюдаемой

Есть идеи, почему это не работает? Есть предложения как это исправить? Спасибо за чтение!

...