Question

使用Angular 4，Ngrx Store＆amp; AngularFire2

我在理解如何根据当前登录的用户帐户ID限制Firebase中的商品列表时遇到了实际问题。

我也在使用ngrx，包括ngrx效果。

我需要遵循的步骤是：

•获取当前用户UID - 验证对象

•根据上面步骤中的UID获取用户对象

•根据上面的用户帐户ID获取公司列表

我的问题是，因为我将firebase称为Observable，所以在完成前两个步骤之前，正在调用公司列表。

代码如下，如果有人可以提供帮助，我们将不胜感激：

问题在于通用firebase服务的getEntityList方法 - 我已经标记了问题所在

公司组件

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

import { Observable } from 'rxjs/Rx';
import { Store } from '@ngrx/store';
import { AppState } from './../../../core/models/index';
import { CompanyModel } from './../../../core/models/index';
import { getCompanies} from './../../../core/store/actions/company.actions';

@Component({
  selector: 'mj-company',
  templateUrl: './company.component.html',
  styleUrls: ['./company.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CompanyComponent implements OnInit {

  entityList$: Observable<CompanyModel[]>;

  constructor(private store: Store<AppState>) {

    this.entityList$ = this.store.select(state => state.companies);

  }

  ngOnInit() { this.store.dispatch(getCompanies()); }

}

公司行为

import { CompanyModel } from './../../models';
import { Action } from '@ngrx/store';

export const ActionTypes = {

  GET_COMPANIES: 'GET_COMPANIES',
  GET_COMPANIES_SUCCESS: 'GET_COMPANIES_SUCCESS',
  GET_COMPANIES_ERROR: 'GET_COMPANIES_ERROR'
};

export function getCompanies() {
  return {
    type: ActionTypes.GET_COMPANIES,
    entityRef: 'companys'
  }
}

}

公司减速机

import { ActionReducer, Action } from '@ngrx/store';
import { ActionTypes } from '../actions/company.actions';
import { CompanyModel } from '../../models';

export function companyReducer(state = [<CompanyModel>{}], action: Action) {

    switch (action.type) {

        case ActionTypes.GET_COMPANIES:
            return action.payload;
        case ActionTypes.GET_COMPANIES_SUCCESS:
            return action.payload;
        case ActionTypes.GET_COMPANIES_ERROR:
            return action.payload;

        default:
            return state;
    }
};

公司效应

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ActionTypes } from '../actions/company.actions';
import { Actions, Effect } from '@ngrx/effects';
import { FirebaseDataService } from './../../services/firebase-data.service';

@Injectable()
export class CompanyEffects {
    constructor(
        private actions$: Actions,
        private firebaseDataService: FirebaseDataService
    ) { }


    // tslint:disable-next-line:member-ordering
    @Effect() getCompanies$ = this.actions$
        .ofType(ActionTypes.GET_COMPANIES)
        .switchMap(action =>
            this.firebaseDataService.getEntityList(action.entityRef)
                .map(companies => ({ type: ActionTypes.GET_COMPANIES_SUCCESS, payload: companies }))
                .catch(() => Observable.of({ type: ActionTypes.GET_COMPANIES_ERROR })));

Firebase通用数据服务

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { Observable } from 'rxjs/Rx';

import { AuthService } from './auth.service';
import { FirebaseUtilityService } from './../../core/services/firebase-utility.service';
import { UserModel, CompanyModel } from './../models/index';

@Injectable()
export class FirebaseDataService {

    $key: string;
    loginId: string;
    currentUser: any;

    constructor(private db: AngularFireDatabase,
                private authService: AuthService,
                private firebaseService: FirebaseUtilityService) { }

    // Return an observable list with optional query
    getEntityList(firebaseRef: string, query = {}): FirebaseListObservable<any[]> {
        this.loginId = this.authService.currentUserId;
// I get this instantly which is good
        console.log('logId: ', this.loginId);
        this.currentUser = this.db.object('users/' + this.loginId);
        console.log('accountId: ', this.currentUser.accountId);
// This is where the problem is because at this stage the subscription above is not complete so accountId is undefined.

        return this.db.list(firebaseRef, {
            query: {
                orderByChild: 'accountId',
                equalTo: this.currentUser.accountId
            }
        });
        // return this.db.list(firebaseRef, query);
    }

    // Return a single observable item
    getEntity(firebaseRef: string, key: string): FirebaseObjectObservable<any> {
        const itemPath = `${firebaseRef}/${key}`;
        return this.db.object(itemPath)
    }

        // Default error handling for all actions
    private handleError(error) {
        console.log(error)
    }

}

Answer 1

问题解决了 - 使用switchMap

return this.currentUser.switchMap(user => {
            return this.db.list(firebaseRef, {
                query: {
                    orderByChild: 'accountId',
                    equalTo: user.accountId
                }
            });
        })

按用户帐户ID限制项目列表

1 个答案: