Ioni c Angular приложение не отображает асин c данные - PullRequest
Новая
       17

Ioni c Angular приложение не отображает асин c данные

0 голосов
/ 20 апреля 2020

Я смог правильно заполнить свой массив объектов асинхронно c, однако эти данные не отображаются на моей странице HTML. Я не понимаю, почему это может быть и как это исправить. Я получаю данные из firebase, и он правильно заполняет мой массив Ping, однако на странице HTML ни один из объектов, которыми я заполнил мой массив, не выполняет рендеринг.

circleda sh .page. html 

<ion-list>
    <ion-item *ngFor="let ping as pings">
      <ion-avatar slot="start">
        <img src="./avatar-finn.png">
      </ion-avatar>
      <ion-label>
        <h2>{{ping.userSent}}</h2>
        <h3>{{ping.message}}</h3>
      </ion-label>
    </ion-item>
  </ion-list>

кружка sh .page.ts 

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

export interface Ping{
    id: any,
    userSent: string;
    message: string;
}

@Component({
  selector: 'app-circledash',
  templateUrl: './circledash.page.html',
  styleUrls: ['./circledash.page.scss'],
})
export class CircledashPage implements OnInit {
  currentUsers: AngularFirestoreDocument<any>;
  pings: Ping[] = [];


  constructor(private firestore: AngularFirestore) {
    this.currentUsers = this.firestore.collection('users').doc(
        '4CMyPB6tafUbL1CKzCb8');
  }

  ngOnInit() {
      this.currentUsers.snapshotChanges()
          .subscribe(res => {
              this.renderPings(res.payload.data().unreadPings);
          });
  }

    async renderPings(unreadPings: any) {
        // this.pings.length = 0;
       await Promise.all(unreadPings.map(ping => {
           ping.get().then(pingdata => {
               let pingId = ping.id;
               pingdata = pingdata.data();
               // tslint:disable-next-line:triple-equals
               if (pingdata.responseMessage == '') {
                   pingdata.userSent.get().then(userdata => {
                       userdata = userdata.data();
                       const pingObject: Ping = {
                           id: pingId,
                           userSent: userdata.name,
                           message: pingdata.sending
                       };
                       this.pings.push(pingObject);
                   }).catch(e => {
                       console.log(e);
                   });
               } else {
                   pingdata.userRec.get().then(userdata => {
                       userdata = userdata.data();
                       const pingObject: Ping = {
                           id: pingId,
                           userSent: userdata.name,
                           message: pingdata.response
                       };
                       this.pings.push(pingObject);
                   }).catch(e => {
                       console.log(e);
                   });
               }
           });
        }));
    }

}
...