根据文档ID显示来自Firestore的数据

Question

我使用Ionic 4应用程序创建了Angular 6，但从Google Cloud Firestore数据库返回特定数据时遇到了一些麻烦。我创建了“卡片”，其中显示了我从Firestore获取的多个统计信息。 Here is an example本卡片的设计方式。我要完成的是，不是要手动输入卡片的标题，而是要从数据库中抓取所有卡片的标题，并根据文档ID在每张卡片上显示。例如，假设我的文档ID为1-10，其中包含诸如“名称，标题，歌曲”之类的信息。现在，对于每个标题，我想像这样从数据库中获取

<div *ngFor="let note of cards | async">
  <h1>{{note.title}}</h1>
</div>

但是我不想做note.title这样的事情note.title[1]，其中1是我的第一个文档ID，以此类推。这是我的代码。

HTML

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
      </ion-buttons>
    <ion-title>Ionic Blank</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

    <ion-card>

        <img src="../../../assets/images/pavilion.jpg" />

        <ion-card-content>
            <ion-card-title>
                <div *ngFor="let note of cards | async">

                    <h1>{{note.title}}</h1>

                </div>
            </ion-card-title>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.
            </p>
        </ion-card-content>

        <ion-row no-padding>
            <ion-col>
                <button ion-button clear small icon-start class="dangerColor">
                    <ion-icon name='star'></ion-icon>
                    Favorite
                </button>
            </ion-col>

            <ion-col text-center>
                <button ion-button clear small icon-start class="dangerColor">
                    <ion-icon name='share-alt'></ion-icon>
                    Share
                </button>
            </ion-col>

            <ion-col text-right>
                <button ion-button clear small icon-start class="dangerColor" routerLink="/maps">
                    <ion-icon name='arrow-dropright'></ion-icon>
                    More
                </button>
            </ion-col>
        </ion-row>

    </ion-card>

    <!--Second Card-->
    <ion-card>

        <img src="../../../assets/images/statehouse2011.jpg" />

        <ion-card-content>
            <ion-card-title>
                <div *ngFor="let note of cards | async">
                   <h1>{{note.title}}</h1>
                </div>
            </ion-card-title>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                commodo consequat.
            </p>
        </ion-card-content>

        <ion-row no-padding>
            <ion-col>
                <button ion-button clear small icon-start class="dangerColor">
                    <ion-icon name='star'></ion-icon>
                    Favorite
                </button>
            </ion-col>
            <ion-col text-center>
                <button ion-button clear small icon-start class="dangerColor">
                    <ion-icon name='share-alt'></ion-icon>
                    Share
                </button>
            </ion-col>

            <ion-col text-right>
                <button ion-button clear small icon-start class="dangerColor">
                    <ion-icon name='arrow-dropright'></ion-icon>
                    More
                </button>
            </ion-col>
        </ion-row>

    </ion-card>

</ion-content>
    <router-outlet></router-outlet>

home.page.ts

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

interface Note {
    title: string;
    description: string;
    id: string;
}
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

    cardsCollection: AngularFirestoreCollection<Note>;
    cards: Observable<Note[]>;

    constructor(
        private afs: AngularFirestore
    ) {
        this.cardsCollection = this.afs.collection('cards')
        this.cards = this.cardsCollection.valueChanges()
    }
}

Answer 1

如果要使用文档ID，则有两个选择：

1。使用方法snapshotChanges()

• 就像在AngularFire文档中写的一样： “为什么要使用它？-当您需要数据列表但又希望保留元数据时” （例如ID）

2。创建文档时手动添加文档ID

或

3。如果您只想枚举

• 您可以使用ngFor的索引：

<div *ngFor="let note of cards | async; let i = index"> <h1>{{ i }} {{ note.title }}</h1> </div>