как получить коллекцию angularfire и показать ее на html - PullRequest
Новая
       11

как получить коллекцию angularfire и показать ее на html

0 голосов
/ 14 сентября 2018

Я пытаюсь показать всех клиентов, которых я добавил в свою коллекцию, на HTML-странице. У меня проблемы с отображением списка коллекций.

Что я могу сделать, чтобы решить эту проблему?

Мой firebaseService.ts: 

addcustomer(value){
    return new Promise<any>((resolve, reject) => {
        let currentUser = firebase.auth().currentUser;  

        this.afs.collection('customers').doc(currentUser.uid).collection('info').add({
            name: value.name,
            address: value.address, 
            description: value.description, 
            id: value.id
        })

        .then(
            res => resolve(res),
            err => reject(err)
        )
    })
}

getcustomers(){
    return new Promise<any>((resolve, reject) => {
        let currentUser = firebase.auth().currentUser;
        this.snapshotChangesSubscription = this.afs.collection('customers').snapshotChanges()
        .subscribe(snapshots => {
            resolve(snapshots);
        })
    });
}

Мой дом.тс: 

import { Component } from '@angular/core';
import { IonicPage, ModalController, NavController, NavParams } from 'ionic-angular';

import { FirebaseService } from '../services/firebase.service';


@IonicPage()
@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
})

export class HomePage {
    items: Array<any> = [];

    items2: Array<any>;

    ionViewWillLoad(){
    this.getData();
  }

getData() {
    this.firebaseService.getcustomers()
    .then(tasks => {
        this.items = tasks;

        console.log(this.items);
    })
}

Мой дом.html 

<ion-header>
    <ion-navbar>
        <ion-title>home</ion-title>
    </ion-navbar>
</ion-header>

<ion-list>
    <ion-item *ngFor="let item of items" >
        <h2>Nombre:{{item.payload.doc.data().name}}</h2>
            {{(item | async)?.payload.doc.data().address}}
            {{(item | async)?.payload.doc.data().description}}
    </ion-item>
</ion-list>
...