Angular - Firestore چگونه مقدار یک مجموعه را از سند مجموعه دیگر که شناسه آن ارجاع داده شده است دریافت کنیم

من دو مجموعه فروشگاه آتش دارم با تصویر مرجع زیر.

من میخواهم firstName و title را بدست آورم. اینجا signup_id از شناسه سند coll-signup ارجاع داده شده است. کد زیر کاری است که من انجام دادم.

مدل feed.ts

export interface Feed {
    firstName? : string;
    signup_id? : string;
    title? : string;
}

قالب مؤلفه خبرخوان

    <ul *ngFor="let feed of feeds">
<!-- <li>{{feed.firstName}}</li> --> // Here I want to print my first name
      <li>{{feed.title}}</li>
      <li>{{feed.signup_id}}</li>
    </ul>

news-feed.component.ts

import { Component, OnInit } from '@angular/core';
import { Feed } from '../../models/feed';
import { FeedService } from '../../services/feed.service';
@Component({
  selector: 'app-news-feed',
  templateUrl: './news-feed.component.html',
  styleUrls: ['./news-feed.component.css']
})
export class NewsFeedComponent implements OnInit {
  feeds : Feed[];
  constructor(private feedService: FeedService) { }

  ngOnInit() {
    this.feedService.sellectAllNews().subscribe(feeds => {
      this.feeds = feeds;
    })
  }

}

feed.service.ts

    import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
    import { Observable } from 'rxjs/Observable';
    import { Feed } from '../models/feed';
    @Injectable()
    export class FeedService {
      feedCollection : AngularFirestoreCollection<Feed>;
      feedItem : Observable<Feed[]>;
    
      constructor(private afs : AngularFirestore) { 
        this.collectionInitialization();
      }
    
      collectionInitialization() {
// I think here I have to modify or add next collection to will get the output
        this.feedCollection = this.afs.collection('col-challange');
        this.feedItem = this.feedCollection.stateChanges().map(changes => {
          return changes.map(a => {
            const data = a.payload.doc.data() as Feed;
            return data;
          })
        })
    
      }
      sellectAllNews() {
        this.collectionInitialization();
        return this.feedItem;
      }
    }

آیا امکان انجام این کار در فایر استور وجود دارد؟ من تازه کار هستم در فایر استور. لطفاً کمکم کنید. ممنون!

پاسخ شماره ۱

شما نیاز دارید دو مجموعه را با هم ترکیب کنید.

این کد را امتحان کن

this.feedCollection = this.afs.collection('col-challange');
this.feedItem = this.feedCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        //here you get the data without first name
        const data = a.payload.doc.data() as Feed;
        //get the signup_id for getting doc from coll-signup
        const signupId = data.signup_id;
        //get the related document
        return afs.collection('coll-signup').doc(signupId).snapshotChanges().take(1).map(actions => {
          return actions.payload.data();
        }).map(signup => {
          //export the data in feeds interface format
          return { firstName: signup.firstName, ...data };
        });
      })
    }).flatMap(feeds => Observable.combineLatest(feeds));

پاسخ شماره ۲

برای کسانی که با مشکل مواجه هستند، ترکیب اسناد در Firebase Cloud Firestore هنگام استفاده از Angular6, RxJS 6 و AngularFire v5.0 کد زیر را امتحان کنید

مدل feed.ts

export interface Feed {
  firstName?: string;
  signup_id?: string;
  title?: string;
}

export interface CollSignup {
  firstName: string;
  mob: string;
}

export interface ColChallange {
  signup_id: string;
  title: string;
}

سرویس feed.service.ts

import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable, combineLatest } from 'rxjs';
import {flatMap, map} from 'rxjs/operators';
import {ColChallange, CollSignup, Feed} from '../../models/feed';

@Injectable()
export class FeedService {
  colChallangeCollection: AngularFirestoreCollection<ColChallange>;
  feedItem: Observable<Feed[]>;

  constructor(private afs: AngularFirestore) { }

  collectionInitialization() {
    this.colChallangeCollection = this.afs.collection('col-challange');
     this.feedItem = this.colChallangeCollection.snapshotChanges().pipe(map(changes  => {
      return changes.map( change => {
        const data = change.payload.doc.data();
        const signupId = data.signup_id;
        const title = data.title;
          return this.afs.doc('coll-signup/' + signupId).valueChanges().pipe(map( (collSignupData: CollSignup) => {
            return Object.assign(
              {firstName: collSignupData.firstName, signup_id: signupId, title: title}); }
          ));
      });
    }), flatMap(feeds => combineLatest(feeds)));
  }

  sellectAllNews() {
    this.collectionInitialization();
    return this.feedItem;
  }
}

برای چاپ تمام دادهها

this.feedItem.forEach(value => {
  console.log(value);
});