У меня есть список предметов, и у каждого предмета есть несколько тегов. У меня также есть список флажков тегов, которые пользователь может установить для фильтрации элементов, содержащих эти теги.
Я хочу работать с необработанными наблюдаемыми, используя асинхронную подписку, а не вручную, и я заставил это работать, как вы можете видеть в моем плункере ...
массив тегов элемента фильтра сфлажки и наблюдаемые
Однако в реальном мире мне нужно получить список флажков из 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$;
}
}
}
рабочий результат с созданной вручную наблюдаемой
фильтрация не работает с идентичной видимой базой данных, наблюдаемой
Есть идеи, почему это не работает? Есть предложения как это исправить? Спасибо за чтение!