以角度（angularfire2）将多个选定选项传递给firebase查询答案

【问题标题】：Pass multiple selected options to firebase query in angular (angularfire2)以角度（angularfire2）将多个选定选项传递给firebase查询
【发布时间】：2019-11-01 18:20:09
【问题描述】：

我想在他们从表格的下拉菜单中选择时显示多个用户数据。在单个用户中选择它是工作，但选择多个时，没有任何内容。我们可以在 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();
}

【问题讨论】：

您可以使用 forkJoin 为每个选项并行运行请求。
它是如何工作的。我的意思是任何样品。我对此一无所知。

标签： javascript angular firebase google-cloud-firestore angularfire2

【解决方案1】：

您想要做的是多次OR 操作，这是firebase 的限制之一（angularfire 只是firebase 的一个包装器），如documentation 中所述：

查询限制：

逻辑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 中所需的结构修改为您希望数据结构化的选择。

【讨论】：