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

Question

我使用 Ionic 4 应用程序创建了一个 Angular 6，但我在从 Google Cloud Firestore 数据库返回特定数据时遇到了一些问题。我创建了 "cards" 来显示我从 Firestore 获取的多个统计数据。 Here is an example 我的卡片是如何设计的。我想要完成的是，我不想手动输入卡片的标题，而是想从数据库中获取它们并根据文档 ID 显示在每张卡片上。例如，假设我有 1-10 的文档 ID，其中包含 "name, title, song" 等信息。现在对于每个标题，我想像这样从数据库中抓取它

<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 文档中所写： "Why would you use it? - When you need a list of data but also want to keep around metadata"（例如id）

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

或

3。如果你只是想枚举

• 你可以使用 ngFor 的索引：

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