如何加入 angularfire2 数据库 [英] How to get do a join in angularfire2 database

问题描述

我已经搜索过了，但仍然没有得到正确的答案.我会很高兴你为我指明了正确的方向.

I have searched through and I still couldn't get the right answer. I will be happy you point me to the right direction.

我有一个包含用户和项目的数据库

I have a database with users and projects

pojects: 
   08177a0acb3f4d96f8cb5fa19002d2ed:
       pid: 08177a0acb3f4d96f8cb5fa19002d2ed,
       pName: "Prject 1"
       uId:  "254",
       createdAt: 9377476



users: 
   254:
       userName: "Eric"
       uId:  "254"
       avatar: "image.jpg"

现在我想显示我的项目，我在我的服务中进行列表检索

Now I want to display my projects, I do a list retrieve in my service

this.projectList = this.af.database.list('projects',  {
      query: {
        orderByChild: 'createdAt'
      }
    });



getProjects() {
     return this.projectList.map(snapshot => {
         return snapshot;
     });

我订阅了 component.ts

and I subscribe in the component.ts

this.projectService.getProjects()
    .subscribe(projects => this.projects = projects);

我想要做的是从用户那里获取用户名并与项目一起显示.

What I want to do is get the userName from the users and display it with projects.

如何使用项目中的 uId 字段将用户列表中的用户信息检索到一个列表中，以便显示 ie {{project.userName}} {{project.avatar}}?

How can I use the uId field in projects to retrieve the user info in the users list into one list so I can display i.e {{project.userName}} {{project.avatar}}?

推荐答案

您可以使用 forkJoin 获取项目的用户，并可以使用其结果选择器将所需的属性复制到发出的项目对象中:

You can use forkJoin to obtain the users for the projects and can use its result selector to copy the required properties into the emitted project objects:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/switchMap';

// Compose an observable based on the projectList:

this.projectWithUserList = this.projectList

  // Each time the projectList emits, switch to unsubscribe/ignore
  // any pending user queries:

  .switchMap(projects => {

    // Map the projects to the array of observables that are to be
    // joined.

    let userObservables = projects.map(project => this.af.database
      .object(`users/${project.uId}`)
      .first()
    );

    // Join the user observables, and match up the users with the
    // projects, etc.

    return userObservables.length === 0 ?
      Observable.of(projects) :
      Observable.forkJoin(...userObservables, (...users) => {
        projects.forEach((project, index) => {
          project.userName = users[index].userName;
          project.avatar = users[index].avatar;
        });
        return projects;          
      })
  });

当数据库中的项目发生变化时，上面的实现将发出一个项目数组，但如果用户信息发生变化，它不会发出一个数组.

The above implementation will emit an array of projects whenever the projects in the database change, but it will not emit an array if the user information changes.

如果你想在项目或用户信息发生变化时发出一个数组，你可以使用 combineLatest 而不是 forkJoin 为用户:

If you want to emit an array if either the projects or the user information changes, you can use combineLatest instead of forkJoin for the users:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';
import 'rxjs/add/operator/switchMap';

// Compose an observable based on the projectList:

this.projectWithUserList = this.projectList

  // Each time the projectList emits, switch to unsubscribe/ignore
  // any pending user queries:

  .switchMap(projects => {

    // Map the projects to the array of observables that are to be
    // combined.

    let userObservables = projects.map(project => this.af.database
      .object(`users/${project.uId}`)
    );

    // Combine the user observables, and match up the users with the
    // projects, etc.

    return userObservables.length === 0 ?
      Observable.of(projects) :
      Observable.combineLatest(...userObservables, (...users) => {
        projects.forEach((project, index) => {
          project.userName = users[index].userName;
          project.avatar = users[index].avatar;
        });
        return projects;          
      });
  });

这篇关于如何加入 angularfire2 数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！