Question

我不知道如何实现这一目标，并希望有人可以提供帮助。

我从Angular应用中的Firestore中提取数据并在列表中显示数据。我能够让文档ID没问题。

我想在模态或其他组件中显示记录，以便使用（click）='getAnimalDetail（animal.id）'调用来更新/添加。只是不确定如何将文档ID解析为下一个组件，以便我可以从数据库中检索它的字段。

    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        // get the current user    
        this.curUser = user.uid;
        // console.log('Current User: ', this.curUser);
        // Specify the Collection
        this.animalCol = this.afs.collection(`users/${this.curUser}/animals/`);

        // Now generate the readable data
        this.animals = this.animalCol.snapshotChanges()
                                        .map(actions => {
                                          return actions.map(a => {
                                          const data = a.payload.doc.data() as Animal;
                                          const id = a.payload.doc.id;
                                          return { id, data };
  })
    })
      } else {
          console.log('Something went wrong.')

      }
    })
  }
  getAnimalDetail(animID) {
    console.log('Selected Animal: ' + animID);
    this.animDoc = this.afs.doc(`users/${this.curUser}/animals/` + animID)

    this.anim = this.animDoc.valueChanges();

  }

此代码列出了相应的记录。在编辑记录之后，我需要将文档ID解析为函数或组件，以便从集合中提取文档。理想情况下，打开新组件中的记录是首选或模态，而不是由于要实现的其他功能而内联编辑。

感谢加载！

迈克尔

Answer 1

行，弄清楚......

在app-routing模块中添加路由：

{ path: 'animal-detail/:id', component: DetailAnimalComponent }

然后在发送组件上：

    <ul *ngFor='let animal of animals | async'>
    <li routerLink="/animal-detail/{{animal.id}}"><strong>Name: {{ animal.data.name }}</strong>
...

并最终包含在接收组件中：

import { Router, ActivatedRoute } from '@angular/router';

和...

    constructor(
    ...,
    private route: ActivatedRoute
  ) {
    const id: string = route.snapshot.paramMap.get('id');
    console.log('Animal ID form URL: ', id)
   }

我现在可以使用id从firestore获取doc。希望这对某人也有帮助。

迈克尔

Angular Firestore - 如何将文档的ID解析为另一个组件？

1 个答案: