Блог

Главная - Вопросы по программированию - Angular получает данные вложенной коллекции из CloudFirestore и показывает их только для документов, которые ее содержат?

Angular получает данные вложенной коллекции из CloudFirestore и показывает их только для документов, которые ее содержат?

# #angular #typescript #google-cloud-firestore

Вопрос:

У меня есть коллекция под названием «Врачи». В коллекции есть два документа: UYykRWfzzUMrztZqvOEZ и eYOBnRuqKe3rGLM1nmoC. Только первый документ имеет подколлекцию обзоров.

Я пытался таким образом:

component.html: `

 //component.ts
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  Doctors: Doctor[];
  Reviews: Review[];
 colectie: any;
  constructor(private doctorService: DoctorInfoService, private reviewService: ReviewService, private act: ActivatedRoute, private db : AngularFirestore) { }

  ngOnInit(): void {
    const id = this.act.snapshot.paramMap.get('id');
    this.doctorService.getDoctorList()
      .subscribe(e => {
        this.Doctors = e.map(e => {
          return {
            doctorID: e.payload.doc.id,
            ...e.payload.doc.data() as Doctor
          }
        })
      })

      this.reviewService.getReviewInfo(id)
      .subscribe(e => {
        this.Doctors = e.map(e => {
          return {
            doctorID: e.payload.doc.id,
            ...e.payload.doc.data() as Doctor
          }
        })
      })
  }
  showReviews: boolean = false;
  getDoctorReviews() {
    this.showReviews = true;
  }
  hideDoctorReviews() {
    this.showReviews = false;
  }
}


//reviewService.ts that query the DB

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

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

  constructor(private db: AngularFirestore) { }

  getDoctorID(){
    this.db
    .collection('doctors')
    
  }

  getReviewInfo(id) {
    return this.db
      .collection('doctors/' id 'reviews')
      .snapshotChanges();
  }

} 
 <!--component.html -->

<body>
  <div *ngFor="let doctor of Doctors; let i = index" class="row">
    <div class="column">
      <div class="card bg-light mb-3" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-text">{{ doctor.name }}</h5>
          <h6 class="card-text">{{ doctor.category }}</h6>
          <p class="card-text">Rating : </p>
          <button class='btn btn-primary' (click)="getDoctorReviews()">Show Reviews</button>
          <button class='btn btn-secondary' (click)="hideDoctorReviews()">Hide</button>
        </div>
      </div>
    </div>

    <div *ngIf="showReviews" class="column">
      <div class="card bg-light mb-3" style="width: 18rem;">
        <div *ngFor="let review of Reviews; let i = index" class="row">
          <div class="card-body">
            <h5 class="card-text">{{ review.doctorName }}</h5>
            <p class="card-text">Rating : {{ review.rating }}</p>
            <p class="card-text">{{ review.userName }}</p>
            <p class="card-text">{{ review.message }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>

Я знаю, что путь к коллекции отзывов —
«врачи» docID «отзывы»
но я слишком много дней блокировал отображение вложенной коллекции отзывов только для соответствующего документа, который ее содержит(«UYykRWfzzUMrztZqvOEZ»-> доктор Джеймс Смит).

Мой ожидаемый результат должен быть таким:

ожидаемый результат

Одна из проблем заключается в том, что в component.ts строка

идентификатор const = this.act.snapshot.paramMap.get(‘идентификатор’); возвращает значение null, и я не нашел способа это сделать. Я также попытался отправить документ с component.html в component.ts, но и здесь мне это не удалось.

Любой совет или мнение очень полезны для меня. Спасибо

Ответ №1:

Модель «многие ко многим» не идеальна для чтения в Firestore, поскольку Firestore не извлекает вложенные коллекции для каждого документа. Если ваша цель состоит в том, чтобы просто просмотреть все отзывы или ограничить их, было бы лучше просто получить все отзывы врачей .limit(x) x , чтобы быть вашими максимальными документами для чтения.

citiesRef.orderBy("created").limit(3);

Ключевым фактором является то, что на вас не влияет чтение, когда подколлекция не существует

Источники: https://firebase.google.com/docs/firestore/query-data/order-limit-data

Метки: ,