javascript - 在 Ionic 5 中，如何将 firestore 文档显示到 ionic(html) 屏幕

Question

我已经从 Firestore 中检索了文档，但我不知道如何在离子屏幕上显示该数组。我试过下面的代码。

详细页面.ts

import { Component, OnInit } from '@angular/core';

import { FirestoreService } from '../../services/data/firestore.service';
import * as firebase from 'firebase';
import { from } from 'rxjs';
import { firebaseConfig } from '../../credentials';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {

  constructor(public firestoreService: FirestoreService, ) { }

  // tslint:disable-next-line: member-ordering
  detail: any;


  ngOnInit() {
  }
  async showData() {
    const db = firebase.firestore();
    const docRef = db.collection('srv').doc('Selected Items');
    // tslint:disable-next-line:member-ordering
    docRef.get().then((doc) => {
      const details = doc.data();

      if (doc.exists) {
        console.log('Document data:', doc.data());
        this.detail = details;
        console.log('document2', this.detail);

    } else {
        // doc.data() will be undefined in this case
        console.log('No such document!');
    }
    }).catch((error) => {
    console.log('Error getting document:', error);
    });
  }


}

我得到了以下数组。没问题。

detail.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>detail</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-label><h1>Order page</h1></ion-label><ion-button (click)="showData()">check</ion-button><br><br>

 <ion-list><ion-item *ngFor="let da of detail['n']">
 <p>{{da.name}}</p>

 </ion-item></ion-list>


</ion-content>

但是，它没有在 Ionic 屏幕上显示任何内容并且低于错误

欢迎，如果有人可以提供解决方案。

标签： javascriptarraysangularjsionic-frameworkgoogle-cloud-firestore

Answer 1

在 Mostafa Harb 先生的帮助下，我已经解决了这个错误。在这里，我之前所做的只是更改了detail.page.ts页面。下面给出

import { Component, OnInit } from '@angular/core';

import { FirestoreService } from '../../services/data/firestore.service';
import * as firebase from 'firebase';
import { from } from 'rxjs';
import { firebaseConfig } from '../../credentials';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {

  constructor(public firestoreService: FirestoreService, ) { }

  // tslint:disable-next-line: member-ordering
  detail: any;
  detail1: any;

 


  ngOnInit() {
  }
  async showData() {
    const db = firebase.firestore();
    const docRef = db.collection('srv').doc('Selected Items');
    // tslint:disable-next-line:member-ordering
    docRef.get().then((doc) => {
      const details = doc.data();

      if (doc.exists) {
        console.log('Document data:', doc.data());
        this.detail = details;
        console.log('document2', this.detail);
        this.detail1 =this.detail['n'];
        console.log('document3', this.detail['n']);

    } else {
        // doc.data() will be undefined in this case
        console.log('No such document!');
    }
    }).catch((error) => {
    console.log('Error getting document:', error);
    });
  }

}

现在，它对我来说很好。