Присвоение Firestore поданной переменной и отображение ее в HTML-Angualr 7

Question

Я пытаюсь присвоить определенное поле в firestore переменной в Angular.

В частности, я пытаюсь получить поле «Ежегодный» и отобразить его в HTML.

Это код, который я пробовал:

AnnualVacationRef = this.firestore.collection('vacationBalance').doc('B2TKfIoz1jrJJ954jZ9z.Annual');

В HTML:

<h3>Annual Vacations: {{AnnualVacationRef.Annual}}</h3>

Однако ничего не отображается.

Благодарим Вас за помощь.

Answer 1

Так что вы на полпути правы. Однако вы не помещаете .Annual в идентификатор документа:

const document = this.firestore.collection('vacationBalance').doc('B2TKfIoz1jrJJ954jZ9z')

Но вам также необходимо использовать метод .get(), чтобы получить DocumentSnapshot:

const snapshot: Obervable<firestore.DocumentSnapshot> = this.firestore.collection('vacationBalance').doc('B2TKfIoz1jrJJ954jZ9z').get()

Как вы можете видеть в типе возврата, вы получите Observable. Теперь у вас есть два варианта получения значения: subscribe или pipe(map(...))

Подписаться

this.fireStore.collection('collectionname').doc(id).get().subscribe(value => {
  const data = value.data();
  console.log(data);
  item = data;
});

Pipe (Map (...))

import { map } from 'rxjs/operators';

item = this.fireStore.collection('collectionname').doc(id).get().pipe(map(
  (value: firestore.DocumentSnapshot) => {
    return value.data();
  }
));

.data всегда возвращать весь документ. Результат должен выглядеть так:

{'Ежегодно': 14}

HTML:

<p>Annual: {{item?.Annual}}</p>