Передайте несколько выбранных опций в запрос firebase в angularfire2

Question

Я хочу отображать данные о нескольких пользователях, которые они выбирают из выпадающего меню в таблице. При выборе одного пользователя это работает, но при выборе нескольких ничего не приходит. Можем ли мы сделать это в angularfire? Любая помощь будет высоко ценится. HTML-код -

<mat-form-field class="matselect">
              <mat-label>Select User</mat-label>
              <mat-select [(ngModel)]="selectedUsername" multiple  (selectionChange)="selectedName()">
                <mat-option *ngFor="let userName of filteredUsername"  [value]="userName">{{userName}} </mat-option>
              </mat-select>
            </mat-form-field>

<table>
<tr *ngFor="let post of posts | async" > 
          <td>{{post.userName}}</td>
          <td>{{ post.number }}</td>
          <td>{{ post.callLength}}</td>
</tr> </table>

Файл Component.ts -

selectedName() {
    console.log(this.selectedUsername);
    this.posts = this.afs.collection<Post>('data', ref => ref.where('userName', '==', this.selectedUsername)).valueChanges();
}

Answer 1

То, что вы хотели бы сделать, это выполнить несколько OR операций, что является одним из ограничений firebase (angularfire - просто оболочка для firebase), как указано в документации :

Ограничения запросов:

Логические OR запросы. В этом случае вы должны создать отдельный запрос для каждого условия OR и объединить результаты запроса в вашем приложении.

Поэтому я предлагаю вам выполнить все запросы для каждого имени пользователя параллельно, используя forkJoin.

Пример:

userNames = ['name1', 'name2', 'name3'];

const reqs = this.userNames.map(x => this.afs.collection<Post>('data', ref => ref.where('userName', '==', x)).valueChanges());
this.posts = forkJoin(...reqs).pipe(
  map(val => {
    return val.map((data, i, arr) => {
      return { userName: this.userNames[i], posts: data };
    });
  })
);

Теперь у вас получился наблюдаемый массив, который выглядит следующим образом:

[
  {
    userName: 'name1',
    posts: [/** data from db here **/]
  },
  // ....
]

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