javascript - 将多个选定选项传递给 Angular 中的 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 的包装器)，如 documentation 中所述。 :

Query limitations:

Logical OR queries. In this case, you should create a separate query for each OR condition and merge the query results in your app.

因此，我建议您使用 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 中修改您想要的结构，以选择您想要的数据结构。