如何访问 angular 中的 Firestore 集合中的文档字段？

Question

I'm trying to access photoUrl of user on the basis of ID, but unfortunalty am not getting hat is deserved.

I have attached a picture of my firestore collection, Please tell me how I can access photoUrl. User is the main collection, document on the basis of ID are document and each document have some fielld I want to access photourl on the basis of ID.

getImage(id) { this.users=this.db.collection('user').doc(id).collection('photurl').valueChanges(); console.log(this.users); }

I have implemented the code in the answered but facing a new issue, the function continuously calls itself as the resulting picture is not displaying.

<div *ngFor="let Question of Questions "> <img src="{{ getImage(Question.authorNo) }}" class="d-block ui-w-40 rounded-circle" alt="">

This is my html, I have used iterator because I have many question, I am getting authorID of author and match it with the userID, if any userID matches AuthorID get it photoUrl and display it My function getting photoUrl is as follow

getImage(id) { this.db.doc( user/${id}`).valueChanges().subscribe(user => { this.user = user; this.url = this.user.photoUrl; //console.log(this.url);

}); return this.url; }`

Answer 1

Use a an Observable to subscribe to the user data and assign the photoUrl to a variable [Option 1] or you can then assign all of the user data to a user variable and use user.photoUrl in the template [Option 2].

Option 1

user: any;
photoUrl: string; 

...

ngOnInit(): void {
    this.db.doc(`user/${id}`).valueChanges().subscribe(user => {
        this.user = user;
        this.photoUrl = user.photoUrl;
    });
}

Option 2

user: any; 

...

ngOnInit(): void {
    this.db.doc(`user/${id}`).valueChanges().subscribe(user => this.user = user);
}

Edit: The data model you have currently doesn't lend an easy option to retrieve the photo url. It is recommended to save the photo url directly onto the question document like you are doing with the author id to prevent so many extra reads. Option 3 would allow you to do what you want but it isn't recommended.

Option 3 NOT RECOMMENDED

photoData = [];

...

ngOnInit(): void {
    this.db.collection<any>('user').snapshotChanges().subscribe(snapshots => {
      snapshots.forEach(snapshot => {
        const url = snapshot.payload.doc.data().photoUrl;
        const id = snapshot.payload.doc.id;
        const data = { url, id };
        this.photoData.push(data);
      })
    });
}


getImage(id: string) {
  this.photoData.forEach(item => {
    if (item.id === id) {
      return item.url;
    }
  })
}