引用了 Firestore 如何从另一个集合文档 id 中获取集合值

Posted 2023-03-13

【中文标题】引用了 Firestore 如何从另一个集合文档 id 中获取集合值

【英文标题】：Firestore how to get the collection value from another collection document id is referenced

【发布时间】：2018-04-20 19:23:10

【问题描述】：

我有两个带有以下参考图片的防火商店系列 . 我想得到 firstName 和 title。这里 signup_id 是从 coll-signup 文档 id 引用的。下面给出了我所做的代码。

模型 feed.ts

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

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

这可以做火存储吗？ 我是消防店的新手。请帮帮我。谢谢！

【参考方案1】：

你需要合并两个集合。

试试这个代码

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

【讨论】：

当我导入 'rxjs/add/operator/mergeMap'; flatMap 错误已清除。我应该导入任何其他 observable 吗？

导入import Observable from 'rxjs/Observable';

这是我使用的唯一导入。如果没有任何效果，请尝试全部导入并检查 import 'rxjs/Rx';

console.log(data); console.log(signup); 输出 signup_id: "NxQDrGzF0Qxhni94vvCq", title: "new chalange" firstName: "Amal", mob: "7891234562" 对于这个 return signup_id: signup.firstName, ...data ; 只得到输出 signup_id 和 title 对于这个 return signup_id: signup.firstName, data ; 只得到 firstName 从我的 html 模板。这个怎么连在一起打印？

我没有得到上面的评论，尝试在html中打印json并检查数据是否正确。 <ul> <li *ngFor="let feed of feeds">feed | json</li> </ul>

【参考方案2】：

对于遇到问题的任何人，在使用 Angular6、RxJS 6 和 AngularFire v5.0 时在 Firebase Cloud Firestore 中合并文档，请尝试以下代码

模型 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;

服务提要.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);
);