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

标签 angular typescript firebase angularfire2 google-cloud-firestore

我有两个 fire store 系列,引用图片如下 . enter image description here enter image description here 我想获得 firstNametitle。这里的 signup_id 是从 coll-signup 文档 id 中引用的。按照下面给出的代码我做了什么。

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

新闻提要.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;
      }
    }

这有可能做fire store吗? 我是 fire store 的新手。请帮助我。谢谢!

最佳答案

您需要合并两个集合。

试试这段代码

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

关于angular - Firestore如何从另一个集合文档id中获取集合值被引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47174075/

相关文章:

css - 无法解析 '.file.scss' 中的 '../pages'

TypeScript:将接口(interface)转换为类

firebase - 通过经过身份验证的用户访问条件嵌套数据

javascript - Firebase:如何停止收听快照

angular - 如果使用 Angular 4 输入字段为空,则禁用按钮单击

angular - 无法用 key 写入 blob

java - 将错误消息从 SSE (Webflux) Spring Boot 应用程序传递到 Angular 7 前端

angular mat-checkbox动态地使用ngModel

typescript - 如何使用 Electron 锻造和 Electron 打包器缩小 Electron 应用程序中的 typescript 源代码?

android - 使用消息传递 API 的 Firebase 云消息传递