web-dev-qa-db-ja.com

別のコレクションドキュメントIDからコレクション値を取得する方法が参照されているFirestore

次の参照画像を含む2つの消防署コレクションがあります。 enter image description hereenter image description herefirstNameとtitleを取得したい。ここで、signup_idはcoll-signupドキュメントIDから参照されます。以下のコードは私がしたことです。

モデルfeed.ts

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

ニュースfeed.componentテンプレート

    <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;
      }
    }

これは火の店をすることは可能ですか？私は消防署の初心者です。助けてください。ありがとう！

angulartypescriptfirebaseangularfire2google-cloud-firestore
7
Rijo

2つのコレクションを組み合わせる必要があります。

このコードを試してください

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));
15
Hareesh

問題が発生している場合は、Angular6、RxJS 6およびAngularFire v5.を使用しながらFirebase CloudFirestoreでドキュメントを組み合わせる次のコードを試してください

モデル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);
});
7
Samintha Kaveesh