Отображение данных из магазина на основе идентификатора документа - PullRequest
Новая
       28

Отображение данных из магазина на основе идентификатора документа

0 голосов
/ 18 октября 2018

Я создал Angular 6 с приложением Ionic 4, и у меня возникли небольшие проблемы с возвратом определенных данных из базы данных Google Cloud Firestore.Я создал «карты», которые отображают несколько характеристик, которые я получаю из Firestore. Вот пример того, как устроены мои карты.Я хочу, чтобы вместо того, чтобы вводить названия карточек вручную, я хочу взять их все из базы данных и отобразить на каждой карточке на основе идентификатора документа.Например, допустим, у меня есть идентификаторы документов от 1 до 10 с информацией в них, такой как «имя, название, песня».Теперь для каждого заголовка я хочу получить его из базы данных, например, 

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

, но вместо note.title я хочу сделать что-то вроде note.title[1], где 1 - мой первый идентификатор документа и т. Д. И т. Д.Вот мой код.

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()
    }
}

1 Ответ

0 голосов
/ 18 октября 2018

Если вы хотите работать с идентификаторами документов, у вас есть две опции:

1.Используйте метод snapshotChanges ()

  • Как написано в документации AngularFire: «Зачем вам его использовать? - Когда вам нужен список данных, но вы также хотитехранить метаданные " (идентификатор например)

2.Добавьте идентификатор документа вручную при создании документов

или

3.Если вы просто хотите перечислить

  • Вы можете использовать индекс ngFor:

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

...