Фильтрация наблюдаемого из Angular Firestore - PullRequest
Новая
       5

Фильтрация наблюдаемого из Angular Firestore

3 голосов
/ 02 марта 2020

Я видел некоторые ответы на этот вопрос, которые применяют фильтр к вызову базы данных. Мне нужно вызвать базу данных только один раз, но я не могу понять, как отфильтровать массив, который находится внутри наблюдаемой, возвращаемой Firebase.

У меня есть 2 поля выбора со списком тегов. Я хочу получить весь набор предметов из Firestore и сохранить их в предметах Observable. Затем, когда изменяется одно из полей выбора, я хочу отфильтровать это наблюдаемое, чтобы отображались только элементы с этими тегами. 

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))
        )));
  }

Я не вижу никаких элементов, отображаемых в моем шаблоне. Когда я изменяю selectedTag, используя поле выбора. Я также не получаю фильтрации предметов. Может кто-нибудь подсказать, как я это правильно делаю. Мне нужно selectBoxes для фильтрации, если только один имеет значение или если оба имеют значение.

HTML

<select [(ngModel)]="selectedTag1">
  <option  *ngFor="let item of tagName1">{{ item }}</option>
</select>

<select [(ngModel)]="selectedTag2">
  <option  *ngFor="let item of tagName2">{{ item }}</option>
</select>

<ul>
  <li class="text" *ngFor="let item of filteredItems | async">
    {{item.name}}
    <ul>
      <li *ngFor="let tags of item.tags">
        {{tags}}
      </li>
    </ul>
  </li>
</ul>

ПУНКТЫ 

[
  {
    "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);} );
      })));
  }

Пока я не получаю отфильтрованных результатов.

1 Ответ

2 голосов
/ 02 марта 2020

Как вы уже догадались, вы не должны фильтровать, когда выбранные теги не определены или пусты. Просто настройте логику фильтрации c, как показано ниже: 

  filter() {
    this.filteredItems = this.items.pipe(
      map(arr =>
        arr.filter(item => {
          // return true if selectedTag1 or selectedTag2 is empty

          const matchesForTagName1 = this.selectedTag1
            ? item.tags.indexOf(this.selectedTag1) >= 0
            : true;
          const matchesForTagName2 = this.selectedTag2
            ? item.tags.indexOf(this.selectedTag2) >= 0
            : true;
          return matchesForTagName1 && matchesForTagName2;
        })
      )
    );
  }

Полный пример вы можете посмотреть в Stackblitz здесь .

...