У меня есть угловое 6 с применением firebase. У меня есть Служба с наблюдаемым (позже я хочу, чтобы несколько подписчиков слушали это же наблюдаемое), а также компонент, который подписывается на это наблюдаемое, что им пытается достичь, - это получить объект auth, получить userId (UID) и искать db для всех документов с этим идентификатором
компонент вызывает наблюдаемый на крюке ngOnInit, но на этапе его все еще null, поэтому я получаю
Невозможно прочитать свойство «подписаться» неопределенного
проблема заключается в том, что если я запустил код для заполнения наблюдаемого внутри блока подписки (чтобы получить данные auth), которые я не получаю, чтобы видеть данные, если его вне его (выполняется синхронизация с использованием статического UID), чем заполняется правильно и показывает данные здесь - код для службы
import { Injectable, EventEmitter } from '@angular/core'
import { AngularFirestore, AngularFirestoreCollection, DocumentChangeAction } from '@angular/fire/firestore'
import { Expense } from '../model/Expense'
import { Observable, ReplaySubject, Subject, from } from 'rxjs'
import { map } from 'rxjs/operators'
import { AuthService } from '../core/services/auth.service'
@Injectable({
providedIn: 'root',
})
export class ExpenseService {
private dbPath = '/expenses'
expenseDetailEvent: EventEmitter<Expense> = new EventEmitter<Expense>();
expensesRef: AngularFirestoreCollection<Expense> = null;
expenses$: Observable<Expense[]>;
constructor(private db: AngularFirestore, auth: AuthService) {
auth.user$.subscribe(
user => {
this.expensesRef = this.db.collection<Expense>(this.dbPath, ref =>
ref.where('clientId', '==', user.uid)
);
this.expenses$ = this.expensesRef.snapshotChanges().pipe(
map(actions =>
actions.map(a => {
const data = a.payload.doc.data() as Expense;
const id = a.payload.doc.id;
return { id, ...data };
})
)
);
},
error => console.log(error)
);
}
createExpense(expense: Expense): Observable<any> {
return from(this.expensesRef.add(expense));
}
updateExpense(expense: Expense): Observable<any> {
return from(this.expensesRef.doc(expense.id).update(expense));
}
}
и компонент просто делает
ngOnInit() {
this.expenseService.expenses$.subscribe(expenses => this.expenses = expenses);
}
я заметил, что все примеры в очереди, назовите это на компоненте, но я чувствую, что вызов базы данных должен быть в сервисе аналогичным образом, который выполняется с обычными вызовами http api
UPDATE, если я инициализирую службу, как это
expenses$: Observable<Expense[]> = of([]);
поэтому, конечно, приложение не сбой, но я не вижу никаких данных, если я просто вытаскиваю код снаружи и использую статический UID, чем он ... (конечно, user.uid совпадает с статической строкой, вставленной в i)
вот обновленный код
constructor(private db: AngularFirestore, auth: AuthService) {
console.log('being here ,i see the data on screen using the static uid');
this.expensesRef = this.db.collection<Expense>(this.dbPath, ref =>
ref.where('clientId', '==', 'noYVScDtKfNB5aFqRkAJR7ghxio2')
);
this.expenses$ = this.expensesRef.snapshotChanges().pipe(
map(actions =>
actions.map(a => {
const data = a.payload.doc.data() as Expense;
const id = a.payload.doc.id;
return { id, ...data };
})
)
);
auth.user$.subscribe(
user => {
console.log('if inside here than it will not show any data on screen');
},
error => console.log(error)
);
}
Всего 1 ответ
Проблема заключается в том, что expenses$
Observable будут определены только после того, как auth.user$
что-то испустил, потому что тогда он получает назначение.
Решение 1 Вы можете попробовать ExpenseService
службу ExpenseService
в конструктор компонента более высокого уровня, возможно, даже AppComponent
, чтобы ExpenseService
конструктор ExpenseService
вызывался, а expenses$
Observable назначались (вам просто нужно вводить его без вызова метода или доступ к собственности). В этот момент к моменту загрузки компонента необходимо определить Observable
Решение 2 Вручную создайте Наблюдаемые expenses$
используя, а затем подписываясь на this.expensesRef.snapshotChanges()
вы можете испускать значения обратно в expenses$
Что-то вроде:
...
expensesSubject = new Subject<Expense[]>();
expenses$: from(expensesSubject);
constructor(private db: AngularFirestore, auth: AuthService) {
auth.user$.subscribe(
user => {
this.expensesRef = this.db.collection<Expense>(this.dbPath, ref =>
ref.where('clientId', '==', user.uid)
);
this.expensesRef.snapshotChanges().pipe(
map(actions =>
actions.map(a => {
const data = a.payload.doc.data() as Expense;
const id = a.payload.doc.id;
return { id, ...data };
})
)
).subscribe((whatever) => {
expensesSubject.next(whatever);
})
}
)
}