Получение ошибки в общем сервисе Firestore c при его расширении после обновления до Angular 9 - PullRequest
0 голосов
/ 18 февраля 2020

У меня есть обобщенный c класс, который охватывает Angular Firestore, который я затем печатаю и расширяю для использования в моем приложении. После обновления до Angular 9 эта договоренность больше не работает. Чтобы узнать, где я получил полный код, см. https://www.toptal.com/angular/state-management-in-angular-using-firebase.

Обёртка абстрактного класса:

import { Inject } from '@angular/core';
import { AngularFirestore, QueryFn } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

export abstract class FirestoreService<T> {

    protected abstract basePath: string;

    constructor(
        @Inject(AngularFirestore) protected firestore: AngularFirestore,
    ) {

    }

     collection$(queryFn?: QueryFn): Observable<T[]> {
        return this.firestore.collection<T>(`${this.basePath}`, queryFn).valueChanges().pipe(
            tap(r => {
                if (!environment.production) {
                    console.groupCollapsed(`Firestore Streaming [${this.basePath}] [collection$]`);
                    console.table(r);
                    console.groupEnd();
                }
            }),
        );
    }
}

Затем я расширяю его в:

import { Injectable } from '@angular/core';
import { FirestoreService } from 'src/app/core/services/firestore.service';
import { Employee } from '../models/employee';

@Injectable({
    providedIn: 'root'
})
export class EmployeeFirestore extends FirestoreService<Employee> {

    protected basePath: string = 'employees';

}

Затем введите его в:

import { EmployeesPageStore } from './employees-page.store';
import { EmployeeFirestore } from './employee.firestore';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from '../models/employee';
import { tap, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmployeesService {

  constructor(
    private firestore: EmployeeFirestore,
    private store: EmployeesPageStore
  ) {
    this.firestore.collection$().pipe(
      tap(employees => {
        this.store.patch({
          loading: false,
          employees,
          totalEmployees: employees.length,
          totalDrivers: employees.filter(employee => employee.hasDriverLicense).length,
          totalRosarioEmployees: employees.filter(employee => employee.location === 'Rosario').length,
        }, `employees collection subscription`);
      })
    ).subscribe();
  }

Как уже говорилось, это прекрасно работает в Angular 8, но дает мне следующую ошибку (в инструментах разработчика) в Angular 9:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'collection' of undefined
TypeError: Cannot read property 'collection' of undefined
    at EmployeeFirestore.collection$ (firestore.service.ts:30)
    at new EmployeesService (employees.service.ts:17)
    at Object.EmployeesService_Factory [as factory] (employees.service.ts:119)
    at R3Injector.hydrate (core.js:16765)
    at R3Injector.get (core.js:16526)
    at NgModuleRef$1.get (core.js:35567)
    at Object.get (core.js:33358)
    at getOrCreateInjectable (core.js:5470)
    at Module.ɵɵdirectiveInject (core.js:20777)
    at NodeInjectorFactory.EmployeesSummaryComponent_Factory [as factory] (employees-summary.component.ts:10)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40772)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...